Also known as:
Toggle buttonSwitchToggle

Toggle Switch

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

AnchorNeed 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).

Visuals

UI Kit

Copy guidelines

All toggle switches should begin with a verb and should be clear and concise. When a user clicks on a toggle switch, they expect the action to be immediate. Therefore, avoid ambiguous language and pay close attention to the following rules:

Label your toggle switch based on the context

Pay close attention to the context within which you place the toggle switch. Based on that, you’ll get a good indication of whether your label should contain an affirmative verb or be neutral (i.e. without a verb). For example, in a list of settings with toggles, it’s a good idea to frame your labels neutrally. For example:

Do:
  • Do
    Report includes:
    • Comments [toggle]
    • Engagement score [toggle]
    • Heatmap [toggle]
Don't:
  • Don't
    Report includes:
    • Show comments [toggle]
    • Show engagement score [toggle]
    • Turn on heatmap [toggle]

In cases where the action that the toggle button will perform is not clear, the label should begin with a strong verb that indicates to the user what will happen when the switch is turned on. Avoid negative language including mentioning the “turned off” state.

Do:
  • Do
    Turn on hierarchies [toggle]
  • Do
    Show ignored data [toggle]
Don't:
  • Don't
    Turn off hierarchies [toggle]
  • Don't
    Don't show ignored data [toggle]

Be clear

Make sure you’re completely clear about what the toggle switch does - this includes paying close attention to the placement of the switch as well as any supporting body copy that the user will read before interacting with the toggle.

Keep it short

Avoid long labels for toggles. All labels should be short, to the point and be frontloaded with keywords. Remove any superfluous language and always write for scannability.

Do:
  • Do
    Show comments [toggle]
  • Do
    Send emails automatically [toggle]
Don't:
  • Don't
    Make comments visible [toggle]
  • Don't
    Automatically send emails when survey is live [toggle]

Avoid questions

Never phrase your label as a question. Refer to the point above. Depending on the context of the button, use a verb or phrase the label neutrally.

Do:
  • Do
    Show demographics [toggle]
Don't:
  • Don't
    Do you want to see demographics? [toggle]

Write in sentence case with minimal punctuation

All toggle switch copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.

To keep in mind

  • Toggles are made up of two states: On (green, always on the right) & Off (grey, always on the left)
  • 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 and when not to use

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 Field, 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 a Checkbox Group.

See also

External links