Switch
A 36 by 20 track with a 16px thumb. Off uses Colors/surface/muted, on uses Colors/action/primary.
Figma: 10 / Components / SwitchUsage
Source: src/components/ui/switch.tsx
import { Switch } from '@/components/ui/switch'<FieldRow control={<Switch defaultChecked />}>Send approval emails</FieldRow>When to use
When to reach for it, and when to use something else.
Use it for
Complete: Settings that take effect immediately.
Avoid
Not complete: Choices that need a Save button; use a Checkbox.
Switch
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | – | Controlled state. |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | – | Called when the state changes. |
