What Is a Toggle?

Toggle is a simple user interface component that allows users to update preferences, settings and other types of information. When well designed toggles make it easy for people to switch between two opposing states and deliver immediate results.

Unlike radio buttons and checkboxes toggles enforce a binary state: on or off. This simplicity can make them very effective and intuitive to use when applied in the right context but it also has some drawbacks. Toggle buttons can be difficult to read in certain scenarios and it’s important that designers pick the right visual clues.

The nature of toggles also makes them an excellent candidate for experimentation and optimization. For example, in an ecommerce system we might use a toggle to test whether it’s more effective for a customer to see the total price of their order up front or to have that information hidden until they click to purchase.

When a team decides to deploy a toggle into production they should ensure that it’s ready for action. This usually means testing the toggle configuration that will be live in production with all of the toggles that are intended to be flipped On (that is all existing or legacy behavior is enabled) and all toggles that are meant to be flipped Off (that is all new or future behavior is disabled). In some cases teams might also be wise to test their production release with all of the toggles flipped Off, to avoid a surprise regression in a future release that could be caused by a bug or a change in an environment variable.