Intro

The toggle switch mimics a physical switch. It lets users activate or deactivate individual features, like personalization or display settings.

Switch with label and optional text

When to Use

Do

Use a switch if:

• You want users to set something as active or inactive (for example, in a dialog).
• You need to clearly show the mode or state of a setting.
• The change takes effect immediately.
• If needed, display a short text element (such as text or object status) after the switch to explain what “active” and “inactive” mean in your context.`

Don’t

Don't use a switch if:

• Users need to choose several options or perform extra steps for changes to take effect.
• It's unclear whether the control shows a state or an action. Use a checkbox in this case.
• To prevent localization issues, never use text inside a switch.

Anatomy

1. Track: The track is the container for the handle. The track color also visualizes the state of the switch.
2. Handle: The handle shows whether the switch is on or off. Different icons inside the handle indicate the state.

Behavior and Interaction

The control supports interaction through mouse, touch, keyboard, and screen reader.

Users can switch between two states: active and inactive. They change the state by sliding the toggle from one side to the other or by clicking the empty side, which moves the toggle over.

Switches can have different styles and markups, but they're always "active" or "inactive". The control supports enabled, hovered, and disabled states.

Types

There are three switch types: basic, semantic, and with optional text. Both default and customized versions are supported. Switches don’t generally support value states, but they can use semantic colors to indicate meaning: green for checked, red for unchecked. This means for the checked state, the switch is colored green and for the unchecked state it is colored red.

Basic Switch (Default)

Semantic Switch

Switch with Optional Text and Label

You can display a text element (sap.m.text or sap.m.objectstatus) after the switch to explain what "active” and “inactive” mean for your specific use case. Keep the text short.

You can add a label above the switch to describe what it controls. This label helps users understand the purpose of the toggle – for example, “Enable Notifications” or “Receive Updates.”

Localization

The switch adapts automatically to left-to-right (LTR) and right-to-left (RTL) languages. The position of the text and switch handle is mirrored to match the text direction.

Related Links