A toggle is a control that lets people manage the state of content or views by choosing between two opposing options, using different appearance to indicate each. They’re a good choice when you want to allow users to switch settings on and off, like enabling or disabling Airplane Mode, for example. They’re also the preferred choice for adjusting system settings on mobile because they take up less space than two radio buttons, and don’t force a default value like ‘Yes’ or ‘No’.
The word toggle comes from the 18th century meaning “pin passed transversely through the bight or eye of a rope to fasten it round a stay, mast, etc.” Today, we also use it figuratively to describe switching back and forth between settings or programs, as in video chatting with two friends at once while toggling between screens.
When designing toggles, be sure to provide clear labels that communicate what the switch controls, as well as its current state. Toggle switches that don’t clearly distinguish their states from each other perform worse than those that do.
The best visual cues for a toggle’s current state are size and color. We found that a darker, more saturated color works best to make it obvious which option is currently active, while font size can also be effective if used appropriately (i.e., don’t set a font size that’s hard to read). Embossment was unreliable as a main cue, and should be used in conjunction with other visual signals.
