What Is a Toggle Control?

Toggle is a control that lets people update preferences, settings, and other types of information in one click or tap. Toggles are often preferred over checkboxes, as they have a clearer action and deliver immediate results. Toggles are particularly appropriate when adjusting system settings or preferences (e.g. enabling or disabling Airplane Mode). In these situations, toggles are more useful than checkboxes that require users to select their preference and then wait for it to apply to the application.

Toggles are also an excellent tool for easing into feature experimentation. When teams can see their ideas quickly come to life, they feel more inclined to push past the “I don’t think that will work” mindset and actually take risks.

When designing toggles, it’s important to ensure that the label and action text clearly communicate what is being done and what state it is in. Use verbs rather than nouns, and make sure that the wording is descriptive and not vague. In addition, a high-contrast color should be used to signal the toggle’s state change. Finally, be aware of cultural implications and evaluate whether a particular color may be inappropriate for some users.

Toggles are typically displayed as small or large buttons, depending on platform support. When used in form fields, the toggle is a larger size by default to allow for the inclusion of both a label and an action text. In other cases, a toggle can be rendered as a normal button using the uk-toggle-style option.