A toggle is a kind of switch that has two positions—on or off. It is often used in software and hardware to control settings and features, such as the caps lock key on a keyboard.

When using toggles in your interfaces, ensure that they are clearly labeled and deliver immediate results. Also, make sure that the toggle can be easily interpreted by users with low vision or mobility issues. Use standard visual design cues such as movement and color to help avoid confusion.

Toggle is an excellent choice for adjusting system preferences or settings that are either ON or OFF (or both). It’s also ideal when the options don’t require a user to answer a yes or no question, as they take up less screen space than a checkbox. However, if the user needs to choose from different options (ie: a toggle between two settings) then a radio button would be a better choice because it doesn’t come with a pre-selected default state.

In addition, toggles rely on color to convey meaning, and are cognitively problematic for some people. For these reasons, we recommend you avoid using them as much as possible.

If you need to hide content from viewers, consider using secrets or subscriber containers instead of visibility toggles. These provide more flexibility, as they can be used in multiple places and are hidden from co-authors. They can also be changed in place, without needing to reload the page.