Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Checkbox

Übersicht

Was macht die Komponente?

Dient zur Eingabe von Ja/Nein-Werten.

Wann soll die Komponente eingesetzt werden?

  • Beim Auswählen einer Option.
  • Beim Auswählen mehrerer zueinander unabhängigen Optionen.

Regeln

  • Eine Checkbox ist nur innerhalb von Formularen erlaubt.
  • Eine Vorauswahl ist Pflicht (aktiv oder inaktiv, kein Tristate).
  • Mehrere Checkboxen können vertikal oder horizontal angeordnet werden. Die vertikal Anordnung wird bevorzugt, dadurch kann der Benutzer die Auswahlmöglichkeiten schneller erfassen.
  • Horizontal Anordnung nur bei zwei bis drei Auswahlmöglichkeiten und kurzen Bezeichnungen.
  • Bei mobilen Ansichten ist eine horizontale Anordnung nicht erlaubt.
  • Der Text kann mehrzeilig sein.
  • Nebst der eigentlich Checkbox dient auch der gesamte Text als Click-Target.
  • Oberhalb einer Checkbox-Gruppe kann ein Titel eingesetzt werden.
  • Für detaillierte Erklärungen zu einer Checkbox-Gruppe kann neben dem Titel ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip.
Zustände und Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Checked
  • Unchecked
  • Focused checked
  • Focused unchecked
  • Disabled checked
  • Disabled unchecked

Varianten

Standard

Darstellung der Komponente Checkbox in der Variante Standard

Vertikale Checkbox-Gruppe

Darstellung der Komponente Checkbox als vertikale Gruppe

Horizontale Checkbox-Gruppe

Darstellung der Komponente Checkbox als horizontale Gruppe

Spezifikationen

DesignCode

Impressum Kontakt Datenschutz Cookie Einstellungen