Schalter und Schieberegler

Hauptkapitel
Designsystem
Unterkapitel
Komponenten
Gilt für
Websites & Webapplikationen (mit Login)

Darstellung und Verhalten

Varianten

Schalter

  • Beim Klick verschiebt sich der Schalter zur anderen Seite und die Farbe ändert sich.
  • Die Farbe Blau bedeutet «Ja» bzw. «An».
  • Den Schalter gibt es in drei Varianten:
    • Ohne Bezeichnung
    • Mit Bezeichnung links
    • Mit Bezeichnung rechts

Schieberegler

  • Den Schieberegler gibt es in zwei Varianten:
    • Nutzende können einen einzelne Wert wählen.
    • Nutzende können zwei Werte bzw. einen Bereich wählen.
  • Auf dem Balken können Markierungen gesetzt werden. In diesem Fall springt der Regler beim Bewegen von einer Markierung zur nächsten.
  • Ein Schieberegler kann einen Titel haben.
  • Es gibt einen minimalen Wert und einen maximalen Wert (Min/Max-Wert). Diese können optional angezeigt werden.
  • Der gewählte Wert wird über dem Punkt/Regler angezeigt.
  • Nutzende können die Punkte entweder per gehaltenem Klick verschoben werden oder per Klick auf den Balken. Bei Klick wird immer der Punkt verschoben, der näher an der geklickten Stelle ist.

Verwendung

Schalter

Wir verwenden einen Schalter, wenn eine Ja/Nein- bzw. An/Aus-Option zur Auswahl steht.

Der Schalter kann ein Label haben. Der Text des Labels passt sich an den Status des Schalters an. Wir unterschieden zwei Varianten:

  • Das Label ist «Ja/Nein» oder «An/Aus». In diesem Fall muss der Schalter mit einer Frage als Text ergänzt werden.
  • Das Label ist länger, bspw. «E-Mail Benachrichtigungen erlauben/E-Mail Benachrichtigungen nicht erlauben». In diesem Fall ist keine zusätzliche Frage notwendig.

Schieberegler

Wir verwenden einen Schieberegler, um einen wählbaren Wert zu veranschaulichen.

Ein Schieberegler hat immer einen Min- und einen Max-Wert. Wir empfehlen, diesen sichtbar zu machen, damit die Nutzenden ihre Auswahl besser verstehen können. Die Werte müssen numerisch sein.

Kontakt

Digitale Verwaltung - ZHweb

E-Mail

zhweb@sk.zh.ch