A toggle lets users manage the state of something — a view, a feature, or a setting. It’s a simple but powerful user interface component that works well for things like changing a filter or the visibility of content in an accordion. Typically, a toggle is used to represent a pair of opposing states (like on and off) and utilizes a different appearance for each state. It’s important that the toggle is always clear and direct — a user should be able to tell by just looking at it what will happen if they move the switch.

Toggles can also be used to conduct A/B or multivariate testing by allowing each user of a system to be sent down one or another codepath. This can help optimize a web experience to better meet the needs and motivations of a cohort of users.

While a Toggle can be useful in many cases it’s important to remember that not every toggle should use this approach. For instance, using a toggle to display an opt-in form can be confusing for users since they might not know that they’re not being forced to participate. Also, it’s important to be mindful of UI design principles like proximity and ambiguity when using toggles. Lastly, using the color red to indicate an “on” state can cause confusion and may be unintuitive for some users given its societal and cultural association with stop signs and traffic signals.