A toggle is a control that allows the user to choose between two options—it’s like an on/off switch. Toggles are commonly used to show or hide content, and can be found in almost any application that has a set of option items that can be selected.

It’s important to have clear and concise labels that communicate what action the toggle will take. This will help the user quickly understand whether the toggle is on or off, as well as what state it’s currently in.

Using a more prominent or saturated color for the active toggle is a common design choice, as it helps users differentiate it from the inactive one. However, our research showed that this can cause confusion when users have to spend more than a second thinking about the toggle. We saw that in these cases, the performance of toggles with a more pronounced contrast fell significantly.

Embossment is another visual cue that can be used for toggles, but our research found that it’s unreliable. It’s usually best to combine embossment with a more reliable primary visual cue, such as the text color or size.

You can also use the toggle-group property to group together multiple toggles, so that only one of them can be active at a time. This is similar to how HTML radio buttons work, and can be useful when there are many mutually exclusive options that need to be displayed at the same time (e.g., tabs or accordion/dropdown menus).