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.

Usage

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.

vs

Use a checkbox for Yes or No choices.

States

Enabled

Use when interactive and ready for input.

Disabled

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

Unable to turn on Wi-Fi

Error

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

Success

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

Layouts

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.

Vertical

message text

Vertical Inline

message text

Horizontal

message text

Horizontal Inline

message text

Compact

message text

Alignment