Toggle is the name for a switch that has two positions, on or off. It’s used both in hardware and software, for example, the keyboard key that turns caps lock on or off. It’s also found in options menus on software and mobile devices where users are able to toggle settings and preferences.

Toggles are a good control to use when you need to update user preferences, settings, and other kinds of information quickly. However, it is important to make sure that you understand the cognitive issues surrounding toggles so you can design them in a way that is not confusing to users.

When designing toggles, be careful to avoid relying solely on color to convey a status. A recent study showed that when designers rely on color to indicate an active state, it doubled the error rate for users versus when no color is used. In addition to avoiding relying on color to indicate an active state, it’s best to make sure that the toggle is clearly labeled with direct action text and that the current state is immediately obvious to the user.

For example, you can make the toggle clearer by showing the contrasting colors of the two states (as shown in the demo above). In addition to using a visual cue, it’s important to label the toggle with an explicit action, such as “Yes” or “No.” This ensures that users don’t have to think about what is currently selected and helps them avoid errors when switching between states.