Switch
Turns a single setting on or off.
Installation
pnpm dlx shadcn@latest add @paneui/switchUsage
Examples
Motion
The thumb slides over 300ms with an overshoot curve and the track colour fades over 200ms.
Keyboard
Space and Enter toggle the focused switch. It renders role="switch" with a hidden checkbox, so it works inside forms with name.
API Reference
Built on the Switch primitive. Only the props this library adds or changes are listed; everything else passes through.
Switch
Track and thumb in one part. Also accepts every prop of Switch.Root.
- size= "default"
- "sm" | "default" | "lg"
- Track 26×16 / 32×20 / 40×24px. Inside a sized
Fieldit takes the field's size (xsmaps tosm). - checked
- boolean
- Controlled state.
- defaultChecked= false
- boolean
- Initial state when uncontrolled.
- onCheckedChange
- (checked: boolean, eventDetails) => void
- Called when the switch is toggled.
- disabled= false
- boolean
- Dims the switch and blocks interaction.
- readOnly= false
- boolean
- Focusable but can't be toggled.
- name
- string
- Submits the value with a form.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "default" | Track 26×16 / 32×20 / 40×24px. Inside a sized Field it takes the field's size (xs maps to sm). |
| checked | boolean | — | Controlled state. |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| onCheckedChange | (checked: boolean, eventDetails) => void | — | Called when the switch is toggled. |
| disabled | boolean | false | Dims the switch and blocks interaction. |
| readOnly | boolean | false | Focusable but can't be toggled. |
| name | string | — | Submits the value with a form. |
- data-size
- The resolved size.
- data-checked
- Present when on.
- data-unchecked
- Present when off.
- data-disabled
- Present when disabled.
| Data attribute | Description |
|---|---|
| data-size | The resolved size. |
| data-checked | Present when on. |
| data-unchecked | Present when off. |
| data-disabled | Present when disabled. |