What Is a Togle?

A toggle lets people choose between a pair of opposing states, such as on and off. It uses a different appearance to communicate each state and typically updates its surrounding context to show what the toggle controls. Toggles are not as common in web design as buttons, but can be useful when used properly. When not used correctly, however, they can be confusing for users.

A good rule of thumb is to avoid toggles whenever possible and instead use a button that has clear text to communicate its current state. That’s largely because of the accessibility issues involved with them. While they’re a great solution for situations like switching between stream and map views, in many other cases buttons would be better.

The main problem with toggles is that they don’t have an empty or default state. This means that in order to convey an “off” state, designers must resort to a color. Unfortunately, color can be a very poor indicator of an active or inactive state and may cause confusion if not done correctly. For instance, the color green is traditionally used to indicate on/off status but that doesn’t work well for people with red/green color blindness.

Another issue is that toggles must be manually re-configured in order to change their state, which can introduce bugs and unnecessary complexity into the codebase. For this reason, savvy teams tend to view toggles as inventory that comes with a carrying cost and are proactive in removing or at least minimizing their number. This can be as simple as adding a task on the team’s backlog or as sophisticated as putting an expiration date on a feature flag so it will fail to deploy at the end of its lifecycle.