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.
Props
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.
SwitchVisual Props
Decorative switch paint for use inside another widget (for example 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.
Use interactive Switch for standalone toggles. Use SwitchVisual only when nesting a real switch would create a nested-interactive violation.