Toggle
A two-state button that can be on or off, built on top of Base UI.
Installation
$ npx shadcn@latest add "/r/toggle.json"
Usage
Sizes
Available in three sizes to accommodate different layouts.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | The size of the toggle. |
| pressed | boolean | - | The controlled pressed state of the toggle. |
| defaultPressed | boolean | false | The default pressed state of the toggle. |
| onPressedChange | (pressed: boolean) => void | - | Event handler called when the pressed state changes. |
| disabled | boolean | false | Whether the toggle is disabled. |
| className | string | - | Additional CSS classes to apply to the toggle. |