Toggle is a user interface control that helps users update preferences, settings, and other types of data. They’re ideal for situations when the setting has a default state (either ON or OFF).
Unlike radio buttons which require a clear label to convey their current state, toggles rely on visual appearance for this purpose. This makes them a poor choice for situations where accessibility is critical.
Toggles are difficult to use on mobile devices because of the limited screen space. They also force the user to make a decision between two opposing states which can be confusing for users. While it’s possible to create accessible toggles, it’s important that you consider the context and whether a better alternative exists for your use case.
Small toggles are ideal for condensed spaces and appear inline with other components or content, such as inside data table rows. These have a smaller footprint than the default toggle and display a checkmark tick in the on state to ensure they’re still accessible without requiring visible label or action text.
In this example from Discover Iceland, the toggle is used to select between three different camera perspectives — a stream view and a map view. The design isn’t consistent with how people commonly use toggles online — for example, in this case the user would likely understand that left means “cookies” but right doesn’t.
For instance, if the toggle is used as a feature flag to deploy a new version of a product to a subset of users (similar to a Canary Release or Champagne Brunch) it will need to support runtime configuration in order for users in that cohort to test the effects of the change. This will add complexity and overhead to your CI/CD pipeline and may impact the feedback loop that’s critical for rapid iteration.
