A toggle is a switch that has two positions, on and off. It’s a familiar type of control, found in everything from car ignition switches to light bulbs and even laptop caps. The word itself is derived from an 18th century definition of “pin passed through the eye of a rope to hold it in place.”

The toggle has become a go-to interface element when designers need to update preferences, settings, and other types of information. While it can be effective, there are some situations where a toggle should be avoided. Using a toggle when it’s not the best option can lead to confusion and frustration for users.

In these cases, a more intuitive and less distracting design is needed. A better alternative is to use a checkbox, which offers similar functionality with more consistency across platforms and devices.

Toggles should be reserved for situations that require the user to choose between two opposing options and deliver immediate results. They should not be used when users will need to click a Save or Confirm button to apply the changes to their account. Additionally, if a toggle needs to take time to process (such as when downloading content), it’s a good idea to add a progress indicator to let the user know it is working.

It is also important to consider the default toggle configuration when designing a new interface. Default toggles are larger in size than small toggles, and they are typically required to display visible label and action text. Choosing a toggle that has a smaller font size than the default can reduce its visibility and increase confusion for users. In the tests, toggles with a font size difference that was barely noticeable performed worse than those with a more pronounced or saturated color.

In addition to considering the default toggle configuration, it’s important to test the toggles you plan to release with a variety of configurations. Ideally, you should test the toggles you expect to go live with with both the current production toggle configuration and the fallback toggle configuration (which would be flipped Off). Additionally, it’s often helpful to include state descriptors next to the toggle (e.g., On and Off) to further clarify its function.

Lastly, it’s vital to keep accessibility in mind when designing toggles. Many designers add colors to distinguish the active and inactive states, but this can be confusing for users with visual impairments. For example, the colors green and red are often used as default toggle states, but they can be hard to distinguish for users with color blindness or other conditions that limit their ability to perceive contrast. Additionally, the word “on” in the green toggle may be difficult for users to read when the toggle is on a dark background. To address these challenges, it’s important to use high-contrast colors and evaluate societal and cultural implications. For instance, the color red can be counterintuitive for users who associate it with stop signs and traffic lights.