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.
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.
Behavior and Interaction
The user can switch between two values, such as On and Off.
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.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.