Toggle is a control that allows users to quickly switch between two opposing values that affect the state of content or a view. It is typically used for “on/off” switches, but can be useful for other binary actions that occur immediately after the user flips it. If your goal is to let people choose between multiple options, a dropdown or list might be a better choice.

Toggles are very common in modern interfaces. They’re often used as simple, compact alternatives to radio buttons and input type=”checkbox”> elements. This is probably because they have the same effect but require less space. However, toggles have several disadvantages that should be considered before you use them.

They can be very difficult to understand, especially for users who are not familiar with them. They can also cause confusion if the wrong state is selected. To avoid this, it is a good idea to design your toggles with clear text that clearly describes the current state and a visual cue that makes it easy to distinguish between the two states. The best way to do this is to use a primary color that is different from the background, but this can be confusing for users who don’t have access to a screen reader or other accessibility tool. For this reason, we recommend that you only use primary colors if they are already present in the design of your page.

It is recommended that you only use toggles when they will be activated immediately. If you need to use them in a longer form where users have to click a Save or Confirm button before the new state is applied, it might be better to replace them with a single checkbox. This will make it easier for users to manage their data and reduce the likelihood that they forget to apply the new state.

In addition, we recommend avoiding inversion of toggles. The half with the filled background tends to lure users’ attention much more quickly (as demonstrated by our tests), but it is also harder to distinguish from the inactive half. Similarly, embossment was found to be unreliable as a primary cue for the active state—in our tests it was almost as bad as using a solid color.

Finally, many designers who implement toggles in their sites don’t take the time to ensure they are accessible. This can result in a toggle that is completely inaccessible to users of screen readers and other accessibility tools. For this reason, we have created a small HTML + CSS only implementation of an accessible toggle that you can copy and paste into your site. You can open the Advanced Options of this widget to adjust its positioning, Responsive, Animation & Delay, and other properties. If you want to learn more about accessibility and how we can help you create accessible web sites, please contact us. We’d love to help!