Switch
Immediate on/off control for settings that apply as soon as they change. Space and Enter both toggle it.
Preview
Live preview
Usage
Examples
Controlled setting
const [enabled, setEnabled] = useState(false)
<label className="flex items-center justify-between">
<span>Email notifications</span>
<Switch checked={enabled} onCheckedChange={setEnabled} />
</label>Destructive toggle
<Switch variant="destructive" size="lg" aria-label="Maintenance mode" />Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled state. Pair it with onCheckedChange. |
| defaultChecked | boolean | false | Uncontrolled initial state. |
| onCheckedChange | (checked: boolean) => void | — | Fires when the user toggles with click or keyboard. |
| disabled | boolean | false | Blocks interaction and dims the control. |
| variant | "default" | "brand" | "destructive" | "default" | Color used for the on (checked) track. |
| size | "sm" | "md" | "lg" | "md" | Track and thumb size. |
| name / value | string | — | Renders a hidden native input so the control posts inside a form. |
Accessibility
Accessibility notes
- Renders role="switch" with aria-checked, so screen readers announce on/off rather than checked/unchecked.
- Toggle with Space or Enter; both are handled natively by the underlying button.
- Use a real <label> wrapping the text (as above) or aria-label when there is no visible label.
- Switch is for immediate effects. For changes that need saving, prefer a Checkbox plus a save action.
- Disabled state uses opacity 50% and is announced as disabled, not just dimmed.