A toggle is a switch that can be used to set a state of something on or off. We see them often in technology, computing and programming to give users a clear way to select options or settings.

A simple way to use them is to create a Boolean variable that represents a toggle state, and then associate an event with it so that when the user clicks the toggle, the variable changes. Then the program can check the variable’s current value to determine what to do next, whether it be to turn something on or off or to change a setting.

Another way to use them is to make Experiment Toggles for things like A/B testing. For example an ecommerce company may have two different suggestion algorithms they are debating and want to see which performs better. They’ll add an experiment toggle to the configurator that will consistently send a given user down one of the codepaths based on their cohort, and then after a few weeks they can see which algorithm is performing better and then go live with it.

However, even though these are great uses for toggles they still can be confusing to users when used in the wrong context. For instance many designers use toggles in a graphical manner without considering accessibility, making them hard for screen readers to understand. Plus, they’re often visually confusing because they have no “empty” state, just a left or right position and the proximity principle means that if you place a button on the right side of the interface, users will expect it to be on (and vice versa). We suggest using them cautiously in these contexts and always considering accessibility and other design principles for your implementations.