Switch
.mdToggle switch whose thumb slides on a stiff spring and stretches while pressed.
switchtogglesettingsformspring
Installation
$npx shadcn@latest add @geturui/switch
Usage
usage.tsx
1import { Switch } from "@/components/ui/switch";
2
3export function EmailSettings() {
4 return (
5 <Switch
6 label="Email me about releases"
7 defaultChecked
8 onCheckedChange={(on) => console.log("releases", on)}
9 />
10 );
11}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | On state when controlled. |
defaultChecked | boolean | false | Initial state when uncontrolled. |
onCheckedChange | (checked: boolean) => void | — | Called with the new state. |
label | ReactNode | — | Visible label; wraps the switch in a <label> so the text toggles it too. |
disabled | boolean | false | Dims the switch and blocks input. |
aria-label | string | — | Accessible name when there is no visible label. |
className | string | — | Classes for the label wrapper, or the switch when there is no label. |
Accessibility
- A native <button role="switch"> with aria-checked, toggled with Space or Enter.
- With label, the text is a real <label>, so clicking it toggles and it becomes the accessible name.
- Without a visible label, pass aria-label or wrap it in your own <label>.