Overview
When to use
- The choice is between two opposing states, ex: on/off, show/hide, activate/disable
- Action is immediate, meaning it does not requiring a “save” or “submit” or any other type of confirmation
- There is always a default value, aligning with the most-used value
Content
- Use positive language, e.g. “Show terminated employees” instead of “Hide terminated employees”
- Ensure the label is as clear as possible (simple, non-technical, everyday language)
- Keep it as short as possible, 2 - 3 words
- Always start with an active verb. That verb has to represent the action that happens when you turn on the toggle, e.g. “Show [thing]”.
- Show will often be the verb you need
Placement
- Lay out your lists of toggle switches vertically, with one toggle per line.
- Center align toggle switches when grouping with buttons and icon buttons
- In a show/hide situation, use only one toggle switch per control area

Hit space
Hit space includes the content related to the toggle. In mobile settings, the hit space is the entire row.

Error handling
Toggle switches can not be in an error state.
Best Practices
Counts
Show a count when it adds value.

Iconography
Adding an icon is not built within the component. To add an icon, use the following specs:
- Style: solid, fontawesome
- Size: 12x12px
- Color: match the icon color to the toggle state (grape for active, ash for inactive)

Resources
(internal only)
Related components
|
Checkbox (group) |
Checkbox (single) |
Toggle switch |
||
---|---|---|---|---|---|
Number of options |
Multiple |
Multiple |
2 (on/off) |
2 (on/off) |
2-4 |
Number of selections |
1 |
0 - all |
1 |
1 |
1 |
Default selection |
Yes (usually) |
No |
Yes |
Yes |
Yes |
Relationship of options |
Mutually exclusive |
Independent |
Mutually exclusive |
Mutually exclusive |
Mutually exclusive |
Selection occurs |
After confirmation |
After confirmation |
After confirmation |
Immediately |
Immediately |