UI-Justiz

An- /Ausschalter

Der An-/Ausschalter ermöglicht es Nutzenden schnell eine Funktion zu aktivieren bzw. deaktivieren.

überblickspezifikationentwicklung

Aufbau

Grafik, die den Aufbau eines Toggles erklärt. Die darauffolgende Liste bezieht sich auf die, in besagter Grafik, markierten Bestandteile dieser Komponente.
  1. Toggle
  2. Textlabel

    Verhalten

    Bei längerem Text, kann dieser umbrechen. Der Schalter ist dann top-aligned, zum Text platziert. 

    Mehrzeiliges Label
    An-/Ausschalter mit Label, das über zwei Zeilen geht.

    Ein Toggle-Element ohne sichtbares Textlabel darf nicht verwendet werden.

    Positiv-Beispiel eines An-/Aus-Schalters mit Beschriftung.
    Negativ-Beispiel eines An-/Aus-Schalters ohne Beschriftung.

    Zustände

    Das Toggle-Element befindet sich immer links und die folgenden Zustände stellen jeweils die “On” und “Off” Status dar.

    Toggle Zustände
    Toggle der Variante “on” und “off” in den Zuständen Default, Disabled, Hover, Mouse Down / Armed und Focus + Hover.
    Toggle mit Focus
    Toggle in den Varianten “on” und “off” mit Focus in den Zuständen Default, Hover und Read-Only.
    Übergang zwischen "An" und "Aus" Status
    Visualisierung des Toggle-Übergangs zwischen Ein- und Aus-Zustand.

    Barrierefreiheit

    Vom Screenreader wird der Status “An” bzw. “Aus” bei Fokussieren des Elements mit ausgegeben.

    Bedienung

    Tastaturbedienung

    • Tab fokussiert das Schalter-Element
    • Enter oder Leertaste aktiviert oder deaktiviert den Schalter

    Mausbedienung

    • Klick mit linker Maustaste aktiviert oder deaktiviert den Schalter

    Weitere Themen:

    cover

    Auswahlschalter

    Der Auswahlschalter ermöglicht es, durch Hin- und Herwechseln, maximal eine aus mehreren Optionen auszuwählen.

    cover

    Badge

    Badges können zur Kategorisierung von Inhalten oder zu Kennzeichnung von Status verwendet werden.