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.

Airplane mode

Use a toggle for On or Off choices.

vs

Remember me

Use a checkbox for Yes or No choices.

States

Wi-Fi Bluetooth

Enabled

Use when interactive and ready for input.

Wi-Fi Bluetooth

Disabled

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

Wi-Fi Bluetooth 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.

Wi-Fi Bluetooth 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

label toggle 1 toggle 2 message text

Vertical Inline

label toggle 1 toggle 2 message text

Horizontal

label toggle 1 toggle 2 message text

Horizontal Inline

label toggle 1 toggle 2 message text

Compact

label toggle 1 toggle 2 message text

Alignment

left right Group Left toggle 1 toggle 2 Group Right toggle 1 toggle 2