Loading...
Loading...
> A toggle switch component for boolean settings.
1import { Switch } from "@/components/ui/switch"
1<div className="flex items-center gap-2">2 <Switch id="notifications" />3 <Label htmlFor="notifications">[ENABLE NOTIFICATIONS]:</Label>4</div>
1<Switch />
1<Switch defaultChecked />
1<div className="flex items-center gap-2">2 <Switch id="dark-mode" />3 <Label htmlFor="dark-mode">[DARK MODE]:</Label>4</div>
1<Switch disabled />
1<Switch disabled defaultChecked />
1<div className="grid gap-4">2 <div className="flex items-center justify-between">3 <Label htmlFor="emails">[EMAIL NOTIFICATIONS]:</Label>4 <Switch id="emails" defaultChecked />5 </div>6 <div className="flex items-center justify-between">7 <Label htmlFor="push">[PUSH NOTIFICATIONS]:</Label>8 <Switch id="push" />9 </div>10 <div className="flex items-center justify-between">11 <Label htmlFor="sms">[SMS NOTIFICATIONS]:</Label>12 <Switch id="sms" disabled />13 </div>14</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | Controlled checked state. |
| defaultChecked | boolean | - | The default checked state for uncontrolled usage. |
| onCheckedChange | (checked: boolean) => void | - | Event handler called when the checked state changes. |
| disabled | boolean | false | Disable the switch. |
| required | boolean | false | Mark the switch as required. |
✓ Use Switch when:
✗ Don't use when:
Switch vs Checkbox: