Switch
Toggle switch for on/off binary settings, built on Radix UI.
Installation
npx paubha@latest add switchUsage
import { Switch } from "@/components/ui/switch";
<Switch label="Email notifications" />Examples
States
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Clickable label, linked to the control via for/id. |
| checked | boolean | — | Controlled checked state. |
| defaultChecked | boolean | — | Uncontrolled initial checked state. |
| onCheckedChange | (checked: boolean) => void | — | Called when the switch is toggled. |
| disabled | boolean | — | Prevents toggling. |
Accessibility
Accessibility
Role.
role="switch"witharia-checkedtrue/false, provided by Radix.Keyboard. Space toggles.
Label. Clicking the label toggles the switch.
Focus. Visible
glow-focusring on the track.