Also known as:
Toggle buttonSwitchToggle

Toggle Switch

A Toggle Switch lets people turn a single setting on or off immediately.

Need to know

  • Toggle Switch labels must include a verb. E.g. Show translations
  • The label should never be on both sides (e.g. On/Off).

To keep in mind

  • Toggles are made up of two states: On (green, always on the right) & Off (grey, always on the left)
  • The label must include a verb. E.g. Show translations [Toggle]
  • Labels can be positioned to the left or right of a toggle, depending on layout constraints.
  • The label should never be on both sides (e.g. On/Off).
  • Toggle switches can be triggered by a drag gesture.
  • In RTL documents, the toggle switch and label are both flipped

When to use

  • When space is tight
  • Applies to a single setting. When it’s instantly applied (the page doesn’t require a save trigger), as opposed to a Checkbox, which would require a save to action.

When not to use

  • If there are more than 1 setting / option, such as filter settings, consider using Checkboxes

See also

See also Checkboxes

External Links