The word toggle describes a switch that has two positions, on and off. A common application of this control is in video chat software to swap between screens as you talk to two friends simultaneously. Unlike checkboxes or radio buttons, toggle switches don’t have a default state (like off) and should be clearly labeled to communicate their current state. They are also not intended to be used as a default for an entire page and should be placed only when it makes sense to do so.

Toggle are great for experimentation, acting as circuit breakers in your codebase, and giving your team a way to roll out new features incrementally. However, there are a few pitfalls to keep in mind when using toggles.

Make sure to always test your toggle with accessibility in mind. Toggle switches that use colors as their primary indicator of state can be difficult to understand for users who are blind or have color vision deficiency. Ensure that the toggle uses clear icons and movement to indicate its current state — rather than relying on color alone.

Another common trap is to over-rely on toggles for things that are best handled by other controls. For example, using a toggle to download content is a bad idea because it implies that the toggle will be on all the time and that the user won’t have control over when it is turned off. It’s better to use a different control like a button or an accordion to manage downloading instead.