API and Development
Switch displays a toggle control that allows users to turn an option on or off. Switches provide immediate visual feedback and are ideal for settings, preferences, and binary choices. Switch provides a toggle interface built on Radix UI's Switch component, ensuring consistent switch patterns across the interface with full keyboard and screen reader accessibility. Switches support both controlled and uncontrolled states, optional labels, and form integration.
| Name | Default | Description |
|---|---|---|
children | Label content displayed next to the switch. When provided, the switch is wrapped in a Label component. | |
checked | Whether the switch is checked (controlled component). | |
defaultChecked | false | Whether the switch is checked by default (uncontrolled component). |
onCheckedChange | Callback function called when the checked state changes: (checked: boolean) => void. | |
disabled | false | Whether the switch is disabled. |
required | false | Whether the switch is required in a form. |
name | The name attribute for form submission. | |
value | "on" | The value given as data when submitted with a name. |
labelledBy | The ID of the element to be used as a text label for the switch. Useful when label text cannot be a child. |
MenuItemSwitch / menuitemcheckbox). Always aria-hidden; the parent owns selection semantics.
| Name | Default | Description |
|---|---|---|
checked | false | Whether the indicator appears checked. |
disabled | false | Whether the indicator appears disabled. |
className | Optional class merged onto the root. |
Switch for standalone toggles. Use SwitchVisual only when nesting a real switch would create a nested-interactive violation.
Use for simple on/off toggles.
labelledBy when the label cannot be a child.