Settings Toggle Row
ProA full-width row pairing a label and description on the left with a trailing toggle switch on the right. The standard pattern for boolean settings in preferences panels. Clicking anywhere on the row toggles the setting. Groups of toggle rows are separated by dividers and wrapped in a labelled section.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Label, description text, and a trailing toggle switch. | Use for boolean settings that take immediate effect — notifications, dark mode, feature flags. |
| With Description |
Usage Guidelines
Do
Make the entire row clickable — not just the toggle switch.
Don't
Use for settings that require a form submission — use Checkbox instead.
Do
Include a description line explaining the consequence of toggling on/off.
Don't
Write vague descriptions — "Enable this feature" tells the user nothing.
Do
Group related toggle rows under a section heading with dividers between groups.
Don't
Stack more than 8 toggle rows without grouping — they become hard to scan.
Code
Design Tokens
Accessibility
- The toggle must be associated with the label via aria-labelledby pointing to the label element.
- Description text should be linked with aria-describedby on the toggle.
- Use role="switch" with aria-checked on the toggle control.
- Disabled state must include aria-disabled="true" and a tooltip explaining the restriction.