Skip to main content Skip to navigation Skip to search

Toggle switches are the digital equivalent of a physical on/off switch. They ask the user to choose between two and mutually exclusive options while always having a default value.


Use a toggle switch when you need the sole options of “on” and “off.”

Toggle switches take up less space than an “on/off” radio button group and communicate their intended purpose better than a checkbox that toggles functionality.

Use a toggle for On or Off choices.


Use a checkbox for Yes or No choices.



Use when interactive and ready for input.


Use when not interactive. For example, when a user does not have permissions to edit the input.

Unable to turn on Wi-Fi


Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.

Changes saved


Use to provide real-time feedback immediately after a user’s input. For example, username available.


Toggle is available in vertical, vertical inline, horizontal, horizontal inline, and compact layout. The align options for Toggle are useful for creating continuity with other UI elements that are related to the toggle selection. See more layout guidelines on the form page. form page.


message text

Vertical Inline

message text


message text

Horizontal Inline

message text


message text