Toggle is a user interface element that helps people update preferences, settings, and other types of information. They are best used when users need to choose between two opposing values that impact the state of content or a view. When used appropriately, toggles can provide a more intuitive and effective way to manage state versus alternatives like a checkbox or radio button. The primary challenge with toggles is that they rely on visual cues to communicate state, so ensuring that those cues are effective is critical. Fortunately, a few simple design choices can make a big difference in how effective they are.

Toggles work well if they have clear labels, look like sliders, and utilize visual cues to reinforce the state (left/right). It is also important that users get immediate results when they change the toggle’s state. If this is not possible due to system delays it may be necessary to include a toggle-processing status loop animation, but even then this should last no more than a few seconds.

Finally, to avoid confusion over current state it is good practice to ensure that the toggle’s half with the filled background is the active one. Using embossment to highlight the active state can be an effective design strategy, but we recommend that it is combined with another primary visual cue such as bold text or a color fill. Emmbossing alone can be confusing for some users and it did not perform as well as other techniques in our tests.