Switch
An accessible toggle switch for instant on/off settings. Built on Radix UI.
Inline with label
Settings row (label left, switch right)
Automatically connect to known networks.
Allow nearby devices to pair.
Disabled
Installation
pnpm
pnpm dlx @hex-core/cli add switchAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state |
defaultChecked | boolean | — | Default for uncontrolled |
onCheckedChange | function | — | Callback: (checked: boolean) => void |
disabled | boolean | false | Disable the switch |
className | string | — | Additional CSS classes |
AI Guidance
When to use
Use for settings that take effect immediately: dark mode, notifications, feature toggles.
When not to use
Don't use for form submissions (use Checkbox). Don't use for mutually exclusive options (use RadioGroup).
Common mistakes
- Using for form fields that need explicit submit
- Missing Label
Accessibility
Always pair with Label. Radix handles role='switch' and aria-checked.
Token budget: 250