A toggle is a switch with two positions: on and off. The word is also a verb—you might toggle back and forth between screens as you video chat with two friends at once, or you might “toggle” your Caps Lock button between French and Spanish (or English). In user interface design, a toggle is a form element that allows users to update preferences, settings, or other types of information. When used effectively, toggles can provide an intuitive, easy-to-use user experience. The key is to choose the right visual cues, be consistent across platforms, and deliver immediate results when users press a toggle.
When to Use Toggles
Toggle forms are an excellent choice for setting or changing system settings that have a fixed default state, such as the airplane mode on mobile devices. They take up less space than radio buttons and provide a clearer indication that something has changed. In general, you should only use toggles when the user needs to select between a pair of opposing states. If the default state is already set, other control elements like a checkbox might be better.
It’s also important to be proactive about removing toggles that are no longer needed. Savvy teams think of their toggle configurations as inventory that comes with a carrying cost and seek to reduce the number of toggles in production as quickly as possible. To accomplish this goal, many teams add a task to their backlog for removing a toggle whenever it is first released and create a schedule for reviewing the current number of toggles to ensure that no unnecessary ones are still active in production.
