A toggle is a control that allows people to choose between two opposing values, like ON or OFF. They are the right control to use when you want people to manage the state of content or a view, but they don’t work well for other types of actions that involve selecting from a list, such as checking a box. In this case, a toggle should be replaced with a checkbox or radio button.
Toggles are especially popular on mobile because they take less screen estate than a set of radio buttons, and they enforce a mutually exclusive state (on or off). They can also be used to change the default state of an app’s settings, such as turning on or off airplane mode. In these cases, you should clearly identify the state of the toggle using an interface icon and by adding a label to describe its current state. You should also update the toggle’s appearance, usually by changing its background color, based on its current state.
When you use a toggle to change the default state of an app’s setting, make sure the toggle always returns to its original state (ON or OFF). If you’re switching between two states that don’t have any meaningful difference (like OFF and ON), provide clear visual cues to help people understand what is happening. For example, when you switch a toggle from OFF to ON, the icon should turn white and the text should say “ON.” This way users can easily tell what the toggle’s current state is.
It’s important to test the toggle configuration that will be live in production, but it’s also helpful to test a fall-back configuration where any toggles you intend to release flipped On are flipped off. This will ensure that you don’t accidentally introduce a regression in a future release.
Many teams use a feature toggle to perform experimental or A/B testing. They put a toggle in front of a small group of users and then observe their behavior. This can help them find the best design for a new feature before it goes live to all users.
Toggle switches are a common element in apps, but they can be hard to use. They are confusing to learn, and they can cause cognitive fatigue. It’s important to keep in mind that the use of toggle switches should be limited and only when it makes sense for the product.
