Toggle – Designing Toggle Switches
Toggle is a magazine that highlights the vital role technology plays in companies and organizations across industries—and the men and women who make it happen. From cybersecurity and data privacy to artificial intelligence and machine learning, our articles show how these technologies are changing the world.
A toggle is a switch between two mutually exclusive states, like on or off. In computing, toggles are used to quickly perform binary actions that change the state of something, such as turning a feature on or off. They are commonly used in settings or preference lists.
In design, toggle switches should be immediately actionable—either on or off. They should have clear labels and visual cues that differentiate the two states. In general, the best way to communicate a toggle’s current state is with an active text descriptor that describes the toggle’s intended state (for example: “On” or “Off”). Alternatively, you can use a visual style that signals the toggle’s state, such as embossment. But we recommend avoiding color as a primary indicator of a toggle’s state, as this can be difficult to distinguish for people with low vision or dyslexia.
When testing toggle configurations it’s important to test the toggles that are expected to go live in production with their On flipped on and any of the fall-back configurations which you don’t expect to change, with their Off flipped off. This prevents unexpected regressions from sneaking into production. For this reason, many teams also choose to run some tests with all toggles flipped Off to ensure there are no surprise regressions when they’re rolled out in a production release.