Switch

The props declared for Switch, generated from the types @proyecto-viviana/ui ships.

Import

import { Switch } from "@proyecto-viviana/ui";

Props

Props for Switch in @proyecto-viviana/ui
Prop	Type	Default	Description
`slot`	string	—	A slot name, used to inject props from a parent slotted context (mirrors upstream's `SlotProps`; our headless `ToggleSwitchProps` already extends it).
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the Switch.
`isEmphasized`	false \| true	—	Whether the Switch should be displayed with an emphasized style.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Additional CSS class name.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the underlying field (root `<div>`) element.
`inputRef`	HTMLInputElement \| ((el: HTMLInputElement) => void) \| { current?: HTMLInputElement \| null \| undefined; }	—	Ref for the underlying input element.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	A description for the Switch.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An error message for the Switch (rendered when invalid).
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Label text for the Switch.
`id`	string	—	The element's unique identifier. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler that is called when the element loses focus. solidaria
`onChange`	(isSelected: boolean) => void	—	Handler that is called when the element's selection state changes. solidaria
`onClick`	(e: MouseEvent) => void	—	Handler that is called when the element is clicked. solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler that is called when the element receives focus. solidaria
`onKeyDown`	(e: KeyboardEvent) => void	—	Handler that is called when a key is pressed. solidaria
`onKeyUp`	(e: KeyboardEvent) => void	—	Handler that is called when a key is released. solidaria
`aria-controls`	string	—	Identifies the element (or elements) whose contents or presence are controlled by the current element. solidaria
`aria-describedby`	string	—	Identifies the element (or elements) that describes the object. solidaria
`aria-errormessage`	string	—	Identifies the element (or elements) that provide an error message for the object. solidaria
`aria-label`	string	—	Defines a string value that labels the current element. solidaria
`aria-labelledby`	string	—	Identifies the element (or elements) that labels the current element. solidaria
`isDisabled`	false \| true	—	Whether the element is disabled. solidaria
`onPress`	(e: PressEvent) => void	—	Handler that is called when the press is released over the target. solidaria
`onPressStart`	(e: PressEvent) => void	—	Handler that is called when a press interaction starts. solidaria
`onPressEnd`	(e: PressEvent) => void	—	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. solidaria
`onPressUp`	(e: PressEvent) => void	—	Handler that is called when a press is released over the target, regardless of whether it started on the target or not. solidaria
`onPressChange`	(isPressed: boolean) => void	—	Handler that is called when the press state changes. solidaria
`autoFocus`	false \| true	—	Whether to autofocus the element. solidaria
`form`	string	—	The form to associate the input with. solidaria
`name`	string	—	The name of the input element, used when submitting an HTML form. solidaria
`value`	string	—	The value of the input element, used when submitting an HTML form. solidaria
`excludeFromTabOrder`	false \| true	—	Whether to exclude the element from the tab order. solidaria
`onFocusChange`	(isFocused: boolean) => void	—	Handler that is called when the element's focus status changes. solidaria
`isSelected`	false \| true	—	Whether the element should be selected (controlled). solidaria
`defaultSelected`	false \| true	—	Whether the element should be selected by default (uncontrolled). solidaria
`validationState`	'valid' \| 'invalid'	—	Backward-compatible controlled validation state. solidaria
`isReadOnly`	false \| true	—	Whether the element is read only. solidaria
`isInvalid`	false \| true	—	Whether the element is invalid. solidaria
`isRequired`	false \| true	—	Whether the element is required. solidaria
`validationBehavior`	'aria' \| 'native'	`"native"`	`"native"` sets the `required` attribute and omits `aria-required`. `"aria"` does the reverse. S2 Checkbox default is native. solidaria
`validate`	ValidationFunction<boolean>	—	Custom validation for the toggle's selected state. solidaria

Declared in packages/viviana-ui/src/switch/ToggleSwitch.tsx.

TabSwitch props

Props for TabSwitch in @proyecto-viviana/ui
Prop	Type	Default	Description
`options`*	SwitchOption[]	—	Options rendered as {@link SegmentedControlItem} children (`value` → `id`, `label` → children).
`value`	string	—	Selected option `value`, mapped to SegmentedControl `selectedKey`. Omit when unset so first-item register runs.
`onChange`	(value: string) => void	—	Called with the selected option `value` string. Maps to SegmentedControl `onSelectionChange`.
`class`	string	—	Class name applied to the SegmentedControl radiogroup (`class`).
`aria-label`*	string	—	Accessible name for the radiogroup. Passed through to SegmentedControl `aria-label`. Required; not defaulted.

Declared in packages/viviana-ui/src/switch/index.tsx.

ToggleSwitch props

Props for ToggleSwitch in @proyecto-viviana/ui
Prop	Type	Default	Description
`slot`	string	—	A slot name, used to inject props from a parent slotted context (mirrors upstream's `SlotProps`; our headless `ToggleSwitchProps` already extends it).
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the Switch.
`isEmphasized`	false \| true	—	Whether the Switch should be displayed with an emphasized style.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Additional CSS class name.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the underlying field (root `<div>`) element.
`inputRef`	HTMLInputElement \| ((el: HTMLInputElement) => void) \| { current?: HTMLInputElement \| null \| undefined; }	—	Ref for the underlying input element.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	A description for the Switch.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An error message for the Switch (rendered when invalid).
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Label text for the Switch.
`id`	string	—	The element's unique identifier. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler that is called when the element loses focus. solidaria
`onChange`	(isSelected: boolean) => void	—	Handler that is called when the element's selection state changes. solidaria
`onClick`	(e: MouseEvent) => void	—	Handler that is called when the element is clicked. solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler that is called when the element receives focus. solidaria
`onKeyDown`	(e: KeyboardEvent) => void	—	Handler that is called when a key is pressed. solidaria
`onKeyUp`	(e: KeyboardEvent) => void	—	Handler that is called when a key is released. solidaria
`aria-controls`	string	—	Identifies the element (or elements) whose contents or presence are controlled by the current element. solidaria
`aria-describedby`	string	—	Identifies the element (or elements) that describes the object. solidaria
`aria-errormessage`	string	—	Identifies the element (or elements) that provide an error message for the object. solidaria
`aria-label`	string	—	Defines a string value that labels the current element. solidaria
`aria-labelledby`	string	—	Identifies the element (or elements) that labels the current element. solidaria
`isDisabled`	false \| true	—	Whether the element is disabled. solidaria
`onPress`	(e: PressEvent) => void	—	Handler that is called when the press is released over the target. solidaria
`onPressStart`	(e: PressEvent) => void	—	Handler that is called when a press interaction starts. solidaria
`onPressEnd`	(e: PressEvent) => void	—	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. solidaria
`onPressUp`	(e: PressEvent) => void	—	Handler that is called when a press is released over the target, regardless of whether it started on the target or not. solidaria
`onPressChange`	(isPressed: boolean) => void	—	Handler that is called when the press state changes. solidaria
`autoFocus`	false \| true	—	Whether to autofocus the element. solidaria
`form`	string	—	The form to associate the input with. solidaria
`name`	string	—	The name of the input element, used when submitting an HTML form. solidaria
`value`	string	—	The value of the input element, used when submitting an HTML form. solidaria
`excludeFromTabOrder`	false \| true	—	Whether to exclude the element from the tab order. solidaria
`onFocusChange`	(isFocused: boolean) => void	—	Handler that is called when the element's focus status changes. solidaria
`isSelected`	false \| true	—	Whether the element should be selected (controlled). solidaria
`defaultSelected`	false \| true	—	Whether the element should be selected by default (uncontrolled). solidaria
`validationState`	'valid' \| 'invalid'	—	Backward-compatible controlled validation state. solidaria
`isReadOnly`	false \| true	—	Whether the element is read only. solidaria
`isInvalid`	false \| true	—	Whether the element is invalid. solidaria
`isRequired`	false \| true	—	Whether the element is required. solidaria
`validationBehavior`	'aria' \| 'native'	`"native"`	`"native"` sets the `required` attribute and omits `aria-required`. `"aria"` does the reverse. S2 Checkbox default is native. solidaria
`validate`	ValidationFunction<boolean>	—	Custom validation for the toggle's selected state. solidaria

Declared in packages/viviana-ui/src/switch/ToggleSwitch.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.