Intro

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

The switch provides attributes to customize its appearance.

Default switch
Default switch

Inline Icon for Accepting and Rejecting

The Accept and Reject switch type allows you to use the check and cross icons. Do not use other icons in this context.

Accept and Reject switch with icon and color coding
Accept and Reject switch with icon and color coding

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:

Switch interaction states
Switch interaction states
Switch Interaction states - Semantic colors
Switch Interaction states - Semantic colors

Guidelines

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

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation