1. What does the element do?

• It is used for activating or deactivating individual setting options.

2. When should the element be used?

• When setting options have to be activated or deactivated.

3. Rules

• It can only be used for activating or deactivating a function.
• No ‘on’ and ‘off’ labels can be used.
• The setting option must be clearly named using a label on the left.

4. Variants and statuses

The element has the following statuses:

• Selected
• Unselected
• Disabled Selected
• Disabled Unselected
• Loading
• Error (default / retry / reloading / button)

The element has the following variants:

• Switch
  • Selected / Unselected
• Switch-Item
  • ohne Icon / mit Icon
  • listed / boxed
  • ohne Subtext / mit Subtext
  • ohne Link / mit Link

4.1 Switch

4.2 Switch-Item

4.2.1 List

4.2.2 List, with icon

4.2.3 List, with subtext

4.2.4 List, with link

4.2.5 Boxed

4.2.6 Boxed, with icon

4.2.7 Boxed, with subtext

4.2.8 Boxed, with link

Design Specification

Figma-Link