Switch
A control that allows the user to toggle between checked and not checked states.
Installation
$ npx shadcn@latest add "/r/switch.json"
Usage
With Label
Disabled State
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | The size of the switch. |
| checked | boolean | - | The controlled checked state of the switch. |
| defaultChecked | boolean | - | The default checked state when initially rendered. |
| onCheckedChange | (checked: boolean) => void | - | Event handler called when the checked state changes. |
| disabled | boolean | false | Whether the switch is disabled. |
| className | string | - | Additional CSS classes to apply to the switch. |