A toggle is a switch that allows users to manage the state of a view or content. It enforces a mutually exclusive state (on or off), and communicates its current state clearly through its surrounding context.

As a verb, tog*gle means “to shift between two opposing states.” When designing interfaces for the web or native devices, toggles help us communicate that we can enable and disable features without overwhelming the user with a long list of options. They also allow us to test how a feature performs in practice by assigning it to different cohorts of users at runtime.

Using Toggles

There are multiple ways to implement and configure toggles, including HTML, JS, and CSS. Most modern browsers and native devices support the use of toggles by default. When designing a toggle, it’s important to consider accessibility issues. For example, toggles can be confusing for screen reader and keyboard user interface (UI) users, who don’t have the ability to see that an on/off toggle is not a button. Designers can mitigate these problems by using an icon that is visually distinct, updating its appearance to match the toggle’s state, and providing contextual explanations of the function.

Another option for managing toggles is to hardcode them in the source code using a preprocessor feature such as #ifdef. While this approach doesn’t allow for dynamic re-configuration it may work well for certain types of toggles such as Release Toggles, where the toggling decision will be baked into each release version and won’t change over time.

Savvy teams treat the inventory of Feature Toggles as something that comes with a carrying cost, and seek to keep the number of toggles in the system low by being proactive about removing toggles when they’re no longer necessary. Some teams even add a toggle removal task to their backlogs when they first introduce a Release Toggle, or put “expiration dates” on Release Toggles that will fail a test if the toggle isn’t removed before the date expires.

MatButtonToggle provides a mat-button-toggle-group> element that binds aria-pressed and aria-labelledby properties to convey the toggle’s state, as shown below. This is particularly helpful when working with groups of toggles, since it helps convey the group’s collective meaning to assistive technology users.

When implementing a MatButtonToggle, be sure to consider how its state will be communicated to assistive technology users (for example, screen readers and other UI augmentation tools). This can be done by binding aria-pressed and aria-labelledby on each individual toggle. Additionally, you can apply a role attribute to the mat-button-toggle-group> to communicate that it represents a group of related toggles. This will help assistive technology users understand that they need to press all of the toggles within the group in order to activate the feature.