What Is a Togle?

A toggle is a control that allows you to choose between two mutually exclusive states (such as on or off). Toggles are most often used when you need to update user preferences, settings and other types of information. They require less screen real estate than a radio button and tend to be more intuitive for users because they have a physical component that changes position as you use it.

As a general rule toggles should be clearly labeled and visually distinct from other controls to avoid confusion. This can be done with high contrast colors (i.e. red as on and green as off) and clear text that identifies the current state. This is particularly important for users with vision impairments such as color blindness. It’s also good practice to evaluate societal and cultural context and make sure that your toggles are not offensive.

Managing toggle configuration can become difficult at scale as the number of toggles grows. Some teams opt to hardcode toggle configuration in the code using commenting or a preprocessor feature like #ifdef, however this approach becomes cumbersome with larger numbers of toggles and it can be difficult to maintain consistency across releases. Alternatively, some teams opt to move toggle configuration into some type of centralized store, often an existing application DB. This approach can be more performant but requires the build-out of a form of admin UI for system operators, testers and product managers to view and manage the toggles.