Prepared Docs

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.

Basic Switch

Use for simple on/off toggles.

Switch with Label

Add a label using children.

Controlled Switch

Control switch state programmatically.

Uncontrolled Switch

Use defaultChecked for uncontrolled switches.

Disabled Switch

Disable switches when options are unavailable.

Required Switch

Mark switches as required in forms.

Switch with External Label

Use labelledBy when the label cannot be a child.

Form Integration

Use switches within forms with proper naming.

Settings Panel

Use switches for settings and preferences.

Feature Toggle

Use switches to enable or disable features.

Switch / Usage

Switch / Accessibility

Switch with External Label

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.