Toggle
On/off switch with label, description, and two sizes.
Example
Dark mode
Notifications
Receive push notifications
Compact
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | Required | Accessible label text |
description | string | — | No | Helper text |
checked | boolean | — | No | Controlled checked state |
defaultChecked | boolean | false | No | Initial state (uncontrolled) |
onChange | (checked: boolean) => void | — | No | Called when toggled |
disabled | boolean | — | No | Disables the toggle |
hideLabel | boolean | false | No | Visually hides label |
size | 'sm' | 'md' | 'md' | No | Toggle size |
Accessibility
- role="switch" with aria-checked
- Keyboard: Space to toggle
- Label linked via aria-labelledby
Related Tokens
--toggle-surface--toggle-on-surface--toggle-checked--toggle-gap--toggle-label-font-weight