Switch
A toggle switch component built on Base UI's Switch primitive that supports two sizes and accessible checked/disabled states.
Default
Notifications
Receive alerts about account activity
Notifications are off
Controlled
Maintenance mode
Temporarily disable public access
Disabled
Disabled (off)
Disabled (on)
Small — disabled (off)
Invalid
Terms of Service
You must accept the terms before continuing.
I accept the terms
Sizes
Default size
32 × 18.4 px
Small size
24 × 14 px
With Label
Installation
npx shadcn@latest add @byronwade/switchProps
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "default" | Controls the dimensions of the switch track and thumb. |
| className | string | — | Additional CSS classes merged onto the root element. |
| defaultChecked | boolean | — | Uncontrolled initial checked state (from Base UI Root props). |
| checked | boolean | — | Controlled checked state (from Base UI Root props). |
| onCheckedChange | (checked: boolean) => void | — | Callback fired when the checked state changes (from Base UI Root props). |
| disabled | boolean | — | Disables the switch and applies reduced-opacity styling (from Base UI Root props). |