Using Toggles in Web Applications

A toggle (also known as a toggle switch or rocker switch) is a control that has two positions, on and off. Toggles are typically used to change settings, preferences, or the state of content. They are also preferred over radio buttons or checkboxes because they take up less screen space.

A savvy team will keep toggle configuration as static as possible (although there are some exceptions to this rule). Having the toggle configuration baked into a release means it won’t be subject to the same changes as other code and it can be re-deployed without changing any other part of the code base. However, this approach can have a negative impact on the cycle time of a validation process because it’s necessary to restart a testing environment in order to flip a toggle.

The surrounding context should clearly identify the setting, view or content that a toggle controls. This helps people understand what they’re changing. Toggles are often used for settings that have a default value or are enabled by default. They are less appropriate for those that require users to select a preference (e.g. radio buttons or checkboxes).

When using a toggle, consider how the color will convey its state to users. It’s a good idea to use high-contrast colors to signal a state change. It’s important to remember that not everyone sees the same shades of color so relying solely on this visual cue can be difficult for some people (see WCAG’s 1.4.1). Additionally, if the toggle has an On and Off position a text-based description of the current state is recommended to help address accessibility issues.