Components
Switch
Turns a setting on or off, and the change applies straight away.
shadcn/uiForms and inputs
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/switch.tsxPreview
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add switchExamples
Sizes
States
Props
The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.
| Prop | Type | Default |
|---|---|---|
| size | "sm" | "default" | "default" |
| checked | boolean | – |
| defaultChecked | boolean | – |
| onCheckedChange | (checked: boolean) => void | – |
Guidelines
Use it
- Settings that take effect immediately.
- A label that names the setting, not the state.
Don't
- Use it inside a form that only saves on submit: use a checkbox there.
Accessibility
- Space toggles it.
- Give it a Label, or an aria-label when it stands alone.