The toggle switch mimics a physical switch that allows users to turn things on or off. With the swtich, single settings options such as personalization or display settings can be switched on or off. The initial state of the control (On or Off) should be made clear from the corresponding inline label.

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.

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.

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