The toggle switch mimics a physical switch that allows users to turn individual settings (such as personalization or display settings) “on” or “off”.

Usage

Use the switch if:

• You need to emphasize the “on” or “off” characteristic within a dialog.
• You need to clearly show the mode or state that a setting is in.
• You need a toggle switch for binary settings when changes become effective immediately after the user changes them. For example, if the user needs to set data transmission or accept/reject business objects.
• The change in the setting takes effect instantaneously.

Do not use the switch if:

• The user has to choose several options or perform extra steps for changes to become effective. In this case, provide checkboxes to choose options and a Submit or Next button to apply the changes. Also use checkboxes or a list view if the user can select multiple items.
• The setting that requires a confirmation action or Submit button before it can take effect. In this case, use a checkbox instead.
• It’s not clear if the control is showing a state or an action. In this case use checkbox instead.

Types

Inline Icon for Accepting and Rejecting

Behavior and Interaction

Switch

The user can switch between two states: active or inactive.

Styles

Depending on their usage, switches come in different states and markups, but are always active or inactive. The interaction states are as follows:

Guidelines

Use meaningful label that clearly describe the mode or state a setting is in.

Resources