UX

  • Toggle switches are digital on/off switches (unlike checkboxes or radio buttons)
  • Screen readers literally read their state as “on” or “off”
    • Only use them where those two mutually exclusive options make sense
    • Do not use toggle switches where a checkbox would make more sense
  • Toggles should provide immediate results, giving users the freedom to control their preferences as needed.

Design guidance

The toggle switch UI originated small screens where it made sense to place the switch itself to the right of the label. This presented no obstacles to people with low vision because the view width was narrow.

As toggle switches were adopted on desktop, the screen width grew and now people with low vision using screen magnification cannot perceive the toggle switch without great effort.

  • On desktop, place the toggle switch to the left of the label when the column is wide
  • The toggle switch can be placed to the right of the label when the column is narrow, as it is on mobile devices

Working examples

Privacy settings:
When you share photos, they will be visible to all your friends and followers

Disabled toggle switch

Disabled toggle switches are not focusable with they keyboard, but are still discoverable by a person using a screen reader.

Notification settings
Messages about your user agreement and transactions are required by law.

Bad examples

These are all real examples found in enterprise designs.

Bad examples

How to know if this is a good toggle switch:

  • Ask yourself, “Would I respond “On/Off” verbally to any of these questions?
  • Will this switch setting take immediate effect across the entire application?
  • Does the label itself confuse the action of the switch by implying a state?
Better examples

Why are these examples better?

  • The shipping/billing checkbox affirms a contextual true/false statement
  • The “Filter by color” checkbox controls a contextual filter, not an app wide setting
  • Removing the state from the “Call blocking” label makes the switch purpose and position clear
  • Labeling sleep mode with its benefit (to save power) and removing the wordy description makes the purpose clear

Annotations for switches

  • If you are coding a switch from scratch type=checkbox role="switch"
    • There is no native HTML switch, so they are coded with a checkbox and given a different role
  • Most of the time, your developers will be pulling from a code library with well defined switch components, so it’s not really necessary to annotate a switch if it’s well documented

Further reading

Toggle-Switch Guidelines, Nielsen Norman Group

Related toggle switch entries