Toggle
atomOn/off switch in three sizes with optional contained card style (border-strong, neutral checked fill) and helperText. Best used for immediate boolean settings like dark mode, notifications, or feature flags. The align prop positions the track on the left or right.
Controlled
Live state reflected in the toggle.
Sizes
Small, medium, and large.
Disabled
Non-interactive off and on states.
Contained
Bordered containers with helperText — great for settings panels.
Usage
Installation
API Reference
Toggle props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label next to the toggle. |
checked | boolean | — | Controlled on/off state. |
defaultChecked | boolean | — | Uncontrolled initial state. |
size | "sm" | "md" | "lg" | "md" | Toggle size. |
contained | boolean | false | Wraps the toggle in a border-strong container. Checked fills with neutral color-mix(textPrimary 6%) background; unchecked is transparent. |
helperText | string | — | Secondary text displayed below the label. |
align | "left" | "right" | "left" | Position of the toggle track relative to the label. |
disabled | boolean | false | Prevents interaction. |
onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | — | Change handler. |