Learn about visual thememore

Toggle switch

The toggle switch lets users turn a SKY UX-themed switch "on" or "off." The change takes effect immediately.

Demo

Annual fundraiser

Link for section titled Usage
Usage

Use when

Use toggles when users can toggle between two states or options, and the changes take effect immediately.

undefined
Do use toggles to alternate between two states when changes take effect immediately.
undefined
Do use toggles to set binary states on multiple items.

Don't use when

Don't use toggles when the options have significant consequences that the users need to confirm before changes take effect. Use a workflow where users must confirm the changes instead.

undefined
Don't use toggles for states with significant consequences.

Don't use toggles when the input is presented in a modal. Use checkboxes instead.

undefined
Don't use toggles inside modals where they won't take effect immediately.

Link for section titled Anatomy
Anatomy

1
Toggle switch
2
Label (optional)
3
Help inline button (optional)
image

Link for section titled Options
Options

Label

Text labels describe the properties that toggles control, and you can provide labels for both the selected and unselected states. Always include text labels unless other text clearly indicates the purpose of toggles. For example, when toggles are in grids, you can rely on column headings instead of text labels.

In scenarios where toggles may become disabled, always include labels for both the selected and unselected states to make those states clear to users.

Help inline button

When you need to supplement a toggle switch label with additional information, you can place a help inline button beside the label to invoke contextual user assistance.

Link for section titled Related information
Related information

Components

Guidelines