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 Zusätzliche 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 Übersicht Power-Apps Digitale Werbebanner SAP AI Design: Grundlagen App Icons Select Übersicht

Was macht die Komponente?

  • Dient zur Auswahl einer oder mehrerer Optionen aus einer vorgegebenen Liste.

Wann soll die Komponente eingesetzt werden?

  • Bei einer Auswahl aus mehreren Optionen (Einfach- oder Mehrfachauswahl) einer Liste.
  • Wenn eine Auswahl getroffen werden muss, bei der sich die Einträge gegenseitig ausschliessen und kein Defaultwert gesetzt werden soll (anders als beo der Komponent Radiobutton.
  • Wenn Auswahloptionen gruppiert werden sollen.

Regeln

  • Es müssen mindestens zwei Optionen zur Auswahl stehen.
  • Die Komponente hat immer ein Label.
  • Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip.
  • Der Text in der Komponente ist immer einzeilig.
  • Ist ein Eintrag länger als die verfügbare Breite der Komponente, wird der Text des Eintrages mit «...» abgekürzt.
  • Bei einem Pflichtfeld ist eine Vorauswahl nicht erlaubt.
  • Wenn noch keine Auswahl getroffen wurde, lautet der Text des Labels «Bitte wählen...».
Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Placeholder
  • Focused
  • Disabled
  • Error
  • Mandatory
  • Readonly
  • Expanded

Varianten

Standard

Darstellung eines Selects


Mehrfachauswahl

Darstellung eines Selects mit Mehrfachauswahl


Gruppierte Einfachauswahl

Darstellung eines Selects mit gruppierten Einträgen


Gruppierte Mehrfachauswahl

Darstellung eines Selects mit gruppierten Einträgen und Mehrfachauswahl


Spezifikationen

DesignCode