Switch

Weiterleitung

Sie werden in Sekunden weitergeleitet.

Falls keine Weiterleitung erfolgt, klicken Sie auf den Link:

Es ist etwas schief gelaufen.

Upps - das Senden Deiner Anfrage ist fehlgeschlagen. Du kannst uns aber immer via E-Mail erreichen.

Switch

Switches ermöglichen es den Nutzer, zwischen zwei Zuständen zu wechseln, wie z. B. ein- und auszuschalten. Sie werden häufig verwendet, um Einstellungen zu aktivieren oder zu deaktivieren und ermöglichen eine einfache und schnelle Interaktion.

Component--Data-Display--List-Item--Playground

Properties

Properties definieren die Eigenschaften und verschiedenen Ausprägungen einer Komponente. Sie ermöglichen, die Komponente flexibel an unterschiedliche Anforderungen anzupassen. Da Properties in Design und Entwicklung identisch sind, wird die Übergabe vereinfacht und die Konsistenz sichergestellt.

Variant

(Default) Trailing, Leading

Checked

(Default) False, True

Disabled

(Default) False, True

Visual Aid

(Default) False, True

Required

(Default) False, True

Validation

(Default) No Validation, Invalid, Valid

Size

(Default) Medium, Small

Show Label

(Default) True, False

Show Message

(Default) False, True

Variant

Die Variant-Property bestimmt, wo das Label relativ zum Switch positioniert wird. Bei Trailing (Default) steht das Label hinter dem Switch, bei Leading dahinter.

Checked

Die Checked-Property gibt den aktuellen Zustand des Switches an. Bei True ist der Switch aktiviert (ausgewählt), bei False ist er deaktiviert (nicht ausgewählt). Der Standardwert ist False.

Disabled

Die Disabled-Property legt fest, ob die Komponente aktiv oder inaktiv ist. Bei Disabled = False ist die Komponente interaktiv und unterstützt Zustände wie Hovered und Focused. Wenn Disabled = True gesetzt ist, wird die Komponente inaktiv und zeigt keine interaktiven Zustände mehr. In diesem Fall ist sie nicht klickbar/ausfüllbar. Der Standardwert ist False.

Visual Aid

Mit der Visual-Aid-Property können innerhalb des Switches Icons ergänzt werden, um die Zustände leichter erfassbar zu machen. Standardmäßig ist diese Property False. Die Default Icons können je nach eigenem Kontext ersetzt werden.

Required

Die Required-Property gibt an, ob die Komponente eine Pflichtangabe oder optional ist. Bei True muss eine Auswahl getroffen werden, um die Anforderungen zu erfüllen. Der Standardwert ist False.

Validation

Die Validation-Property unterstützt die Prüfung der Benutzereingabe und umfasst folgende Ausprägungen: Bei "No Validation" (Default) erfolgt keine Überprüfung der Eingabe. "Valid" bedeutet, dass die Eingabe korrekt ist und allen Anforderungen entspricht, während "Invalid" anzeigt, dass die Eingabe fehlerhaft ist und nicht den Anforderungen entspricht.

Size

Die Size-Property bestimmt die physikalische Größe der Komponente. Hierbei kann zwischen Medium (Default) und Small gewählt werden.

Show Label

Die Label-Property gibt an, ob der Switch mit einer Beschriftung versehen ist. Bei True wird ein Label angezeigt, bei False wird der Switch ohne Beschriftung dargestellt. Der Standardwert ist True. Wenn False gesetzt ist, sollte sicherstellen werden, dass eine alternative Beschriftung für Barrierefreiheit bereitgestellt wird.

Show Message

Die Show-Message-Property gibt an, ob eine Message unterhalb von Switch und Label angezeigt wird. Bei True wird der Text dargestellt, bei False nicht. Der Standardwert ist False. Die Message wird häufig für Validation, Hilfestellungen oder Hinweise verwendet, um dem Benutzer zusätzliche Informationen zur Eingabe zu geben.

Examples

Kurz, Knackig, Klar

Setze die Switch-Komponente ein, wenn

  • ein sofortiges Umschalten zwischen zwei Zuständen (an/aus, aktiv/inaktiv) erforderlich ist.
  • eine direkte Aktion ohne Bestätigung ausgelöst wird (z. B. Benachrichtigungen ein/aus).
  • die Zustandsänderung klar erkennbar und sofort sichtbar sein muss.

Guidelines to Go

  • Nutze den Switch für sofortige Zustandsänderungen
  • Immer ein Label Text verwenden (auch wenn ausgeblendet, ist es für Screenreader-Text nötig).
  • Label kurz und prägnant formulieren.
  • Verwende positive Formulierungen

Labeltext

Halte das Label kurz und prägnant. Vermeide negative Formulierungen, die zu Verwirrungen führen könnten und missverständliche Formulierungen wie doppelte Verneinungen.Wenn sinnvoll, kannst du das Label auch dynamisch gestalten und für Checked- und Unchecked-Zustände individuell festlegen.

Switch - Label

🟢 Verwende positiv formulierte Label Texte.🔴 Vermeide negativ formulierte Label Texte.

Visual Aid

Icons können als visuelle Unterstützung eingesetzt werden, um den Zustand eines Switches schneller erfassbar zu machen. Setze eindeutige Icons ein, die den Labeltext wiederspiegeln.

Switch - Visual Aid

Switch vs. Checkbox

Switches werden für sofortige Zustandsänderungen genutzt, die direkt wirksam sind. Checkboxen eignen sich für Auswahlmöglichkeiten, die erst nach einer Bestätigung wirksam werden.

Switch - vs Checkbox

🟢 „Automatische Updates aktivieren“: die Änderung greift sofort.🔴 Die Änderung würde erst beim Bestätigen durch z.B. einen Button wirksam werden.

Accessibility

Screenreader Text

Achte darauf, dass der Label-Text immer mit an die Entwicklung übergeben wird, auch wenn das visuelle Label ausgeblendet ist (Label = false). Ohne die Angabe des Screenreader-Texts kann der Switch nicht barrierefrei genutzt werden.

Checkbox - Content - Accessibility

Development

Du hast Fragen oder Input? 

Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!

E-Mail schreiben Feedback in Github