Components

Toggle

Toggles are used when a property has two defined values. This visual cue provides our users a quick and easy way to switch between these values.

Usage

Use toggles to:

  • Switch a single option on or off, on mobile and tablet
  • Immediately activate or deactivate something

Toggles should be used instead of radio buttons if only one item can be selected from a list.

Don't

Don’t use radio buttons to toggle an option on or off.

Do

Use toggles to turn an option on or off, especially on mobile.

When to use checkboxes instead of toggles

Don't

If a list consists of multiple options, avoid using switches. Use checkboxes instead because they take up less space.

Do

Checkboxes are for making selections from a list. They let users select more than one item and allow for easy selection or deselection of all items with a parent checkbox.

Label

The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label.

Avoid creating a switch that includes the text “on” and “off” within the graphic itself. The switch alone should be sufficient.