A toggle is a simple user interface component that allows users to update settings and preferences. These simple UI controls can easily make or break a user’s experience with an app and they are widely used across modern web apps and mobile devices. However, the way in which they are commonly implemented can make them visually confusing and often times they become inaccessible to disabled users. This article aims to help you understand when a toggle switch should be used, how to properly implement them and when they might not be the best markup for your situation.

The word “toggle” means to alternate between two opposing states, such as on and off. It is used in most of the world’s languages to describe a physical switch found on hardware or software, such as your keyboard’s Caps Lock or Num Lock keys, as well as the menu items that are able to be switched on and off within a program.

Toggle switches are most commonly used when a team needs to let their users choose between two opposing configurations of a feature. For example, when choosing between a map view and a stream view of a news website or when selecting whether or not an app’s features should be available. When implementing toggles it is important that the label clearly communicates what will happen when the control is flipped on or off and that the visual design reinforces this behaviour. In addition to this it is good practice to test both the toggle configuration that will be deployed to production and the fallback toggle configuration which will enable existing or legacy behavior if the current toggle configuration is flipped Off. This reduces the risk of unexpected regressions in a release and is one reason why many teams opt to move their toggle configuration into some form of centralized store (typically an application DB) as opposed to hardcoding it into static files.