Toggle
Toggles allow users to switch between two states, typically on and off.
Basic
A simple toggle controlled with React state.
Off
Sizes
Toggles come in sm, md, and lg sizes.
sm
md
lg
With Label
Toggles can display a label and description.
Settings Example
Multiple toggles styled as a realistic settings panel.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Whether the toggle is on. |
onChange | (e: ChangeEvent) => void | — | Callback fired when the toggle state changes. |
label | string | — | Primary label text displayed next to the toggle. |
description | string | — | Secondary helper text below the label. |
toggleSize | "sm" | "md" | "lg" | "md" | Size of the toggle switch. |
disabled | boolean | false | Whether the toggle is disabled. |
Related Components
Best Practices
✅ Do
- Use for binary on/off settings
- Show the current state clearly
- Provide a label describing the setting
- Use for instant-apply preferences
❌ Don't
- Use toggles for form submissions (use checkboxes)
- Group more than 10 toggles without sections
- Use ambiguous labels
- Change unrelated settings when toggled
Accessibility
| Feature | Support |
|---|---|
| role="switch" | Identifies the element as a toggle switch |
| aria-checked | Reflects the current on/off state |
| Keyboard toggle via Space | Space key toggles the switch state |
| Label association | Connected to label for screen reader context |
| Focus visible ring | Visible focus indicator on keyboard navigation |