Guidelines

Intro

The Switch (DNA) component defines the standardized switch pattern for Data & Analytics products, providing consistent behavior and usage guidance for binary toggle interactions across experiences.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=25076-24278&t=SQmE6dOvM9cGLrP8-11

When to Use

Use the switch:

When a change takes immediate effect.
With static text (i.e., text stays the same regardless of the switch’s state).
When there are 2 or more switches in a group, use a group label or title

Don't

Don't use a switch:

If the user has to choose several options or perform extra steps for changes to become effective. Use a checkbox instead.
With dynamic text (i.e., text changes based on the switch’s state).
With a group label or title for a single switch. Use the switch text to describe the function instead.

Anatomy

Label or Title (optional): Describes a group of 2 or more related switches
Switch: Switch component from the SAP Web UI Kit that can be toggled on and off
Text (optional): Describes the switch’s function

Anatomy diagram of a switch group component with three callout markers: 1 pointing to the group label "Label:", 2 pointing to the toggle switch, and 3 pointing to the individual switch label "Feature A".

Anatomy of the Switch (DNA)

Adding Additional Switches

Steps

Select the Switch Group slot.
Click and drag the white handle downward to add switches, or drag it upward to remove switches.
Alternatively, you can add a switch by duplicating or copy/pasting an existing switch inside the Switch Group.

A switch group component with a dashed pink border showing two enabled toggles labeled "Feature A" and "Feature B", with a drag cursor indicator at the bottom right.