Toggle
A switch control for binary on/off settings that take effect immediately. Supports label, description, and grouping multiple switches with SwitchGroup.
1<Toggle label="Airplane mode" />
2
Usage
1import { Toggle } from "atlas";
2
3<Toggle
4 label="Airplane mode"
5 checked={enabled}
6 onChange={setEnabled}
7/>
8
Examples
Default
The default
Toggle renders in the off position with a label and no description.1<Toggle label="Airplane mode" />
2
With description
Pass a
description string to render helper text beneath the label. Useful for explaining what the toggle controls or any side effects of enabling it.1<Toggle
2 label="Push notifications"
3 description="Receive push notifications on your device."
4/>
5
Disabled
Set
disabled to prevent interaction. The toggle and its label are visually dimmed to communicate that the option is unavailable.1<Toggle label="Disabled" checked disabled />
2
SwitchGroup
Wrap multiple toggles in a
SwitchGroup to manage their state as a single array of active values. Each child Toggle receives a value prop, and the group’s onChange handler fires with the updated array whenever a toggle is flipped.1<SwitchGroup value={notifs} onChange={setNotifs}>
2 <Toggle label="Email" description="Receive updates via email." value="email" />
3 <Toggle label="Push" description="Receive push notifications." value="push" />
4 <Toggle label="SMS" description="Receive text message alerts." value="sms" />
5</SwitchGroup>
6
API Reference
| Prop | Type | Default |
|---|---|---|
| checked | boolean | false |
| label | string | - |
| description | string | - |
| disabled | boolean | false |
| onChange | (checked: boolean) => void | - |