Forms · Application UI
Switch
A toggle switch component built on Base UI's Switch primitive that supports two sizes and accessible checked/disabled states.
Feature showcase
Installation
Features
6 examples
Default, Controlled, Disabled, Invalid, Sizes, With Label.
API
Props
| 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). |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/switch.tsx |
| Default example | content/examples/switch/default.tsx |
| Controlled example | content/examples/switch/controlled.tsx |
| Disabled example | content/examples/switch/disabled.tsx |
| Invalid example | content/examples/switch/invalid.tsx |
| Sizes example | content/examples/switch/sizes.tsx |
| With Label example | content/examples/switch/with-label.tsx |