Toggle is a user interface control that lets people choose between two opposing values that affect the state of content or a view. They are commonly found in settings menus, as well as in other tools that let users manage the status of a view or set of content. When designing toggles, it’s important to make sure they are always clearly labeled, use standard visual design, and deliver immediate results. Otherwise, they may mislead users by introducing confusion or ambiguity.

Toggles are best used when they help people manage a single aspect of something, such as an option item in a settings or preferences menu. A toggle button should also be used only when its behavior is predictable, meaning it can be understood based on the context around it. In most cases, other user interface controls are better suited to these tasks, such as checkboxes or radio buttons.

Toggle buttons are often based on colors to communicate their state. However, this can cause problems when the color is chosen incorrectly. For example, using red as the on position can be confusing for some users, particularly those with red/green color blindness. For this reason, we recommend that you avoid relying on the use of color to communicate the state of a toggle. Also, be sure to consider the societal and cultural implications of the colors you use. For further guidance on how to make toggles cognitively OK, see WCAG 1.4.1.