The toggle switch mimics a physical switch that allows users to turn individual settings (such as personalization or display settings) “on” or “off”. The initial state of the control (On or Off) is indicated by the inline label. When users change a switch to On, they expect an instantaneous action as soon as the label appears.

Usage

Use the switch if:

• You need to emphasize the On/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.

Types

Inline Label

Inline Icon for Accepting and Rejecting

Behavior and Interaction

Switch

The user can switch between two values, such as On and Off.

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

Replace the On and Off labels if there are more specific labels for the setting. Use any short labels (3–4 characters) that represent binary opposites if they are more appropriate for a particular setting. For example, you might use Show and Hide if the setting is “Show images.”

Do not replace the On or Off label unless you really have to. Use the default labels unless there are other labels that are more specific for the setting.

Do not use labels that are longer than three or four characters. Otherwise, the text becomes truncated and loses its meaning.

Resources