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.
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:
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.