Toggle
Accessible switch component that exposes
data-state for styling, mirrors Radix Toggle's API, and forwards all native button props.Anatomy
Compose
Toggle.Root with a Toggle.Thumb (or any custom child) to build your switch UI.API Reference
Root
Acts as a
button with role="switch", manages controlled/uncontrolled state, and forwards all native button props (including type, event handlers, etc.).| Prop | Type | Default |
|---|---|---|
| checked | boolean | - |
| defaultChecked | boolean | false |
| onCheckedChange | (checked: boolean) => void | - |
| disabled | boolean | false |
| Data Attribute | Value |
|---|---|
| data-state | "on" | "off" |
| data-disabled | "" |
Thumb
Stateless visual indicator that consumes context from
Toggle.Root and mirrors data-state/data-disabled for styling.| Prop | Type | Default |
|---|---|---|
| children | HTMLAttributes<HTMLSpanElement> | - |
| Data Attribute | Value |
|---|---|
| data-state | "on" | "off" |
| data-disabled | "" |