How to Use a Toggle Control to Manage the State of Content or Views

Toggle is a control that lets users manage the state of content or views. It can be used in a variety of ways, but it is best for binary actions that respond immediately after the user “flips” the switch.

For example, a toggle could be used to hide content in the article presentation view for viewers who have not yet purchased an article subscription. The article would remain hidden until the viewer clicked the eye icon to reveal it. This feature is currently only available for article sections and items in a content page. Spoilers and dynamic content that load later may break the visibility toggle.

When using a toggle, be sure to include clear and descriptive labels. These should describe what the switch will do when it is in the on position, as well as the current state of the toggle (on or off). WCAG 1.4.1 states that color can be used to convey information to the user, but you should avoid relying on it alone. Color can have varying meanings for different audiences and cultures, so be sure to test your design with a wide range of people to ensure it is cognitively OK.

Applying feature toggles to your development process supports newer agile approaches, allowing you to release features that are still in the development phase. Rather than creating code branches for these features, you can use feature toggles to hold these new features until they are ready for market testing or integration into trunk code.