Using Toggle Controls in Your Web Applications

Toggle is a control that can be flipped on and off. It is the preferred control to adjust settings, especially on mobile devices. A toggle doesn’t have a default state but comes with a pre-selected value of ON or OFF. This makes it more user friendly than a checkbox or radio button.

Toggles are a common element in modern interfaces but they often make our pages look cluttered and confusing. To help you avoid this problem we’ll show a simple HTML + CSS only implementation of an accessible toggle that you can easily copy in your own projects.

As a verb, toggle means to shift or alternate between two different things — such as shifting between two screens during a video chat with two friends. A toggle switch can also be used to alter a specific feature of a product, such as changing its appearance or functionality.

There are a few important considerations when using toggles in your applications:

WCAG recommends that you don’t rely solely on color to communicate a switch’s state. Toggles that rely on only the colors ON and OFF can be difficult to understand for users who use assistive technologies or have limited vision. Instead, try using a toggle that is accompanied by a clear text description of its current state or use a high-contrast color to indicate its state.

Toggle switches can be very useful in performing multivariate testing or A/B tests on a large scale. By exposing a subset of the population to one codepath and then tracking the behavior of that cohort you can determine which codepath is most effective. If you are planning on using toggles in this way then consider exposing an endpoint that allows for dynamic in-memory re-configuration of a flag instead of hardcoding its configuration in your application’s codebase.