Toggle is a user interface control that allows the user to quickly and easily change system settings or preferences. When a toggle is pressed it changes from one state to another, and when it’s pushed again it returns to its original state. Toggles are the preferred user interface control for updating options and preferences, especially on mobile devices. They’re best used for option items that are either ON or OFF, and for items that require an immediate result (like turning Airplane Mode on or off).

Toggles can be confused with other UI controls like checkboxes, so it’s important to clearly communicate what they do by using direct labels and visual cues. Choosing a clear color to indicate the current state of the toggle is important as well—be sure to evaluate both contrast and cultural differences for your audience when choosing the color.

When toggling, it’s important that the user sees immediate results on screen—otherwise they might be tempted to click “Save” or “Confirm,” which can introduce friction in the process of making a selection. If the system has delays in changing to a new toggle state, you can use a processing status loop animation to communicate this to users. Otherwise, it’s better to replace a toggle with a simple checkbox.