Switch
shadcn/ui
Toggle for binary on/off settings. Always pair with a Label using htmlFor.
@/components/ui/switchStates
| State | Preview | Token |
|---|---|---|
| Off | bg-input border-input | |
| On | bg-primary | |
| Focus | ring-ring/50 — Tab to see | |
| Disabled off | opacity-50 cursor-not-allowed | |
| Disabled on | opacity-50 cursor-not-allowed |
In context — notification settings
Notifications
3 active
Label left, Switch right — standard settings panel layout
Switch vs Checkbox
| Switch | Checkbox | |
|---|---|---|
| Effect | Immediate — applies on toggle | Deferred — requires form submit |
| Context | Settings, preferences, feature flags | Forms, multi-select, terms |
| Indeterminate | Not supported | checked="indeterminate" supported |
Props
| Prop | Type | Description |
|---|---|---|
| checked | boolean | Controlled on/off state |
| defaultChecked | boolean | Initial state (uncontrolled) |
| onCheckedChange | function | (checked: boolean) => void |
| disabled | boolean | Prevents interaction, reduces opacity |
| id | string | Links to <Label htmlFor> for accessibility |
On this page