A toggle for turning a setting on or off.
boolean |
false |
Whether the switch is initially active. To render a controlled switch, use the |
disabled | boolean | false | Whether the component should ignore user interaction. |
form | string | – | Identifies the form that owns the hidden input. Useful when the switch is rendered outside the form. |
id | string | – | The id of the hidden input element. When |
inputRef | Ref<HTMLInputElement> | – | A ref to access the hidden |
name | string | – | Identifies the field when a form is submitted. |
nativeButton | boolean | false | Whether the component renders a native |
onCheckedChange | ((checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void) | – | Event handler called when the switch is activated or deactivated. |
readOnly | boolean | false | Whether the user should be unable to activate or deactivate the switch. |
required | boolean | false | Whether the user must activate the switch before submitting a form. |
size | "lg"|"md"|"sm"|"2xl"|"xl" | md | The size of the component. |
uncheckedValue | string | – | The value submitted with the form when the switch is off. By default, unchecked switches do not submit any value, matching native checkbox behavior. |
value | string | – | The value submitted with the form when the switch is on. By default, switch submits the "on" value, matching native checkbox behavior. |
variant | "default"|"expressive"|"sharp"|"classic" | default | The visual style of the component. |