The Switch component implements Radix's Switch component.
Switches are used to toggle application state between two mutually exlusive values. The Switch defaults to the "off" state unless it's rendered with the defaultChecked prop.
The Switch component should not be used to collect form data — use checkboxes or radio buttons for that. Only use Switch inside a form if it is serving its primary purpose of toggling some state with immediate effect (e.g. to conditionally render a section of the form).
<Switch />
Size
The size property can be set to either md or lg. Default is md.
<Switch size="lg" />
Disabled state
The disabled state can be set using the disabled property.
<Switch disabled />
Accessibility
Adheres to the switch role requirements
API Reference
| Prop | Type | Default | Required |
|---|---|---|---|
as | JSX.IntrinsicElements | - | - |
asChild | boolean | - | - |
checked | boolean | - | - |
defaultChecked | boolean | - | - |
onCheckedChange | (checked: boolean) => void | - | - |
required | boolean | - | - |
size | "md" | "lg" | md | - |