A toggle is a switch that enforces a mutually exclusive state, like “on” or “off.” It’s often used to change settings or preferences that are already set. They are the preferred control for mobile because they take less screen space than radio buttons. Toggles should have direct labels, and they should deliver immediate results. It’s best to apply them when the setting has a default value. Otherwise, a checkbox or radio button is more appropriate.

Toggles help support dev teams as they write new features. Rather than create a branch for the feature, they can generate a release toggle that leaves the code inactive while they work on it. This way, they can still push trunk code to production so they can meet delivery targets.

When designing a toggle, be sure that it has clear, direct labels and is consistent with standard visual design patterns. Avoid using color to convey meaning (like green or red) unless it’s necessary for accessibility purposes — the WCAG guidance on this is clear: “Don’t rely solely on colors to convey meaning”.

Toggles can hide content from users while it’s in the presentation view, but they cannot be used for article sections, containers, images, maps, key/value items, prompt linked articles, quotes, or aloud boxes. This also applies to dynamic content, such as spoilers, that is loaded after the page loads. Feature toggles are not a replacement for bug fixes, and it’s important to decide case-by-case whether a toggle is needed for a specific ticket.