A toggle is a switch that has only two positions – on and off. It’s the preferred control for adjusting settings on mobile devices because it takes up less space than two radio buttons or a checkbox. Toggles are especially useful for setting default values and displaying their current state. They can also be used to make changes that require immediate results — but it’s important to be sure users understand what the toggle’s current state is before making a change.

When to use a toggle

Toggles are appropriate for changing system settings, preferences and other types of information. They’re usually paired with clear labels and they should always be accompanied by a visual description of the current state. They’re not recommended for form fields since they may confuse users by not providing an obvious default value or requiring a Save or Confirm button to take effect.

If you choose to use toggles in your designs, be careful to limit the number of states they represent. If there are more than two, it’s better to use a dropdown or radio button instead of a toggle switch. And be aware that toggles can rely on color to convey meaning, which can violate WCAG guidelines.

Toggles are great for supporting agile development processes by allowing teams to release features even while they’re still in development. However, be sure to have a process in place for pruning the toggles as soon as they’re no longer needed.