Toggle Switch

A toggle is a digital “on/off” switch. They are best used for changing the state of system functionalities and preferences.

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
Do
ToggleSwitch-DoDont-1-Do
Don’t
ToggleSwitch-DoDont-1-Dont

 

Do
ToggleSwitch-DoDont-2-Do
Don’t
ToggleSwitch-DoDont-2-Dont

 

Do
ToggleSwitch-DoDont-3-Do
Don’t
ToggleSwitch-DoDont-3-Dont

 

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
ToggleSwitch-Example-Placement

 

Hit space

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

ToggleSwitch-Example-HitSpace

 

Error handling

Toggle switches can not be in an error state.

 

Best Practices

Counts

Show a count when it adds value.

ToggleSwitch-Example-Counts

 

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)
ToggleSwitch-Example-Iconography

 

Resources

(internal only)

Figma

Storybook

Enhancements

 

 

Radio button

Checkbox (group)

Checkbox (single)

Toggle switch

Segmented control

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