Toggle is a type of control that can be either ON or OFF. This type of switch is often used to change a system setting or preference (i.e. turning Airplane Mode ON or OFF). This is the preferred method to adjust settings on mobile devices because it takes up less screen estate than two radio buttons.

We’ve seen toggle switches in action a lot of places, from the Caps Lock and Num Lock keys on keyboards to the checkboxes that allow you to save a post on Twitter. They are an easy and familiar way to alter options in software and hardware, but that doesn’t mean they’re always the best choice for all users. In fact, it’s sometimes better to use a drop-down menu rather than a toggle switch, especially when there are many different options.

The reason why is that it’s difficult to tell whether a toggle switch is in the ON position or the OFF position by purely visual cues. The most common design choice is to have the active option portrayed by a darker color and the inactive option portrayed by a lighter color, but our research found that this is not always effective at communicating the toggle’s state to users. Instead, it’s usually better to use a combination of other visual cues and to make sure that the text in the toggle clearly describes what will happen if the switch is turned ON.

Another problem with using toggles is that they can lead to confusion over time. The most obvious example is the inversion of a toggle switch, where half of the switch has a filled background while the other half doesn’t. This confuses users because they can’t immediately tell if the toggle is in the ON or OFF position. Luckily, this is relatively easy to fix: we can avoid the inversion by making the switch label clear enough and using other cues to communicate the toggle’s state.

The final problem with using toggles is that they don’t work well on forms where a user needs to click a Save or Confirm button for changes to take effect. This can be solved by replacing the toggle with a checkbox if we’re certain that the user will need to confirm their choices. In any other case, we should try to avoid the toggle altogether and replace it with a simple button that will have an immediate effect. This will also help to ensure that the form’s state is correctly conveyed to users, even if the toggle isn’t being actively selected.