Version:

Select ​

Ein Select-Element bietet dem Nutzer die Möglichkeit eine Option aus einer Liste auszuwählen.

Overview ​

Intro ​

Hinweis:

Die Combo Box und Select sind visuell identisch, sie unterscheiden sich lediglich funktional: während Select ein einfaches Overlay-Auswahlfeld ist, verfügt die Combo Box über Filterung , Lazy Loading oder benutzerdefinierte Werteingabe .

Ein Select-Element bietet dem Nutzer die Möglichkeit eine Option aus einer Liste auszuwählen. Die Select-Komponente ist eine komprimierte Listendarstellung und wird immer dann eingesetzt, wenn andere Auswahlelemente, wie beispielsweise die Radio Buttons, zu viel Platz einnehmen würden.

broken_image
Figma

Select

Verwendung ​

👍 Do👎 Don't
...wenn Nutzer aus einer langen Liste (min. 13, max. 200 Einträge) ein einzelnes Element auswählen müssen
...wenn die Listeneinträge keine primäre Information sind und deswegen nicht unmittelbar angezeigt werden müssen
...wenn die Liste kürzer ist und noch gut vom Nutzer überblickt werden kann. Wenn sie beim Öffnen komplett dargestellt wird.		...wenn Nutzer aus 2 Optionen wählen müssen (im Sinne von ein/aus oder ja/nein). Dafür ist ein einzelnes Checkbox-Element die geeignete Wahl, siehe (Checkbox).
...wenn Nutzer aus einer kleinen Anzahl (max. 12) von Optionen eine einzelne Option wählen müssen. Dafür sind Radio Buttons die geeignete Wahl.
...wenn Nutzer mehrere Optionen auswählen können sollen.
Dafür ist die Mehrfachauswahl (Checkbox) die geeignete Wahl.
Nutzer aus einer sehr großen Anzahl von Auswahloptionen (> 200) auswählen müssen
...wenn mehr als eine Auswahl angezeigt werden muss
die Suche nach bestimmten Auswahloptionen benötigt wird
die Auswahloptionen ohne weitere Interaktion direkt angezeigt werden sollen
...wenn die Liste so lang ist, dass sie für den Nutzer als Selectliste schwer zu überblicken ist und im Display nicht vollständig dargestellt wird.

Guidelines ​

Aufbau ​

Das Select setzt sich aus folgenden Bestandteilen zusammen. Label, Select-Feld, Ausklappen-Schaltfläche und Auswahlliste sind immer vorhanden, die als optional gekennzeichneten Elemente werden nur bei Bedarf ergänzt:

  • Label — kennzeichnet das Feld. Für die Barrierefreiheit erforderlich. Unterstützt Plaintext-Inhalt; die Länge ist durch die Breite des Feldes begrenzt. Es steht oberhalb des Select-Feldes, macht dem Nutzer den Zweck des Feldes klar und ist möglichst kurz, präzise und dabei trotzdem klar und eindeutig.
  • Select-Feld — zeigt die gewählte Option an. Anders als bei der Combo Box lässt sich hier kein Text eingeben.
  • Ausklappen-Schaltfläche — liegt rechts innerhalb des Select-Feldes und öffnet die Auswahlliste. Sie ist selbst nicht tastaturfokussierbar und für Screenreader ausgeblendet; fokussiert wird immer das gesamte Feld.
  • Auswahlliste — wird beim Aufklappen als Overlay unter oder über dem Feld eingeblendet und enthält alle Auswahloptionen. Die gewählte Option ist mit einem Häkchen markiert. Passen nicht alle Optionen gleichzeitig hinein, scrollt die Liste.
  • Bedienhinweis (optional) — Text, der im Select-Feld steht, solange keine Option gewählt ist. Er ist kein Placeholder im Sinne eines Text Field : Das Select stellt ihn als Feldinhalt dar und nimmt ihn in den zugänglichen Namen des Feldes auf. Ein sichtbares Label ersetzt er deshalb nicht.
  • Helper text (optional) — erscheint unterhalb des Feldes. Geeignet, um Informationen zu kommunizieren, die der Nutzer für die Auswahl benötigt, z.B. den Zweck des Feldes. Eine Style-Variante erlaubt die Darstellung oberhalb des Feldes.
  • Tooltip (optional) — kleines Text-Pop-up, das bei Hover und bei Tastatur-Fokus angezeigt wird. Helper werden gegenüber Tooltips generell bevorzugt, da sie besser auffindbar und mobil besser unterstützt sind.
  • Prefix (optional) — Element am Anfang des Feldes. Screenreader lesen es in der Regel nicht zuverlässig vor; die Information muss zusätzlich über Label oder Helper text verfügbar sein.
  • Required indicator (bei Bedarf) — Pflichtfelder werden durch einen Indikator neben dem Label gekennzeichnet. Die Kennzeichnung und ihre Erläuterung regelt Formulare .

Einen Clear button hat das Select nicht, und ein Suffix-Element gibt es ebenfalls nicht: Die rechte Seite des Feldes ist für die Ausklappen-Schaltfläche belegt. Ist kein Bedienhinweis gesetzt und hat der Nutzer noch keine Option gewählt, ist das Select-Feld leer.

broken_image
Figma

Select Feld

broken_image
Figma

Ausgeklapptes Select-Feld mit Selektion

Sollen die Optionen gruppiert dargestellt werden, so lassen sich Gruppen Titel definieren, siehe folgendes Beispiel:

broken_image
Figma

Ausgeklapptes Select-Feld mit Selektion in gruppierter Listbox

Die Anordnung des Feldes im Formular und seine Spaltenbelegung regelt das Form Layout .

Info für Dev

In Web Components ist das Select das Element <vaadin-select> aus dem Paket @vaadin/select. Das Paket ist Bestandteil von @mate/bundles. Die Optionen werden über die Eigenschaft items gesetzt; die Komponente rendert daraus eine <vaadin-select-list-box> mit je einem <vaadin-select-item> pro Option.

In Vue heißt die Komponente MateSelect und stammt aus dem Paket @mate-vue/select.

In Flow ist es die Klasse Select aus dem Paket com.vaadin.flow.component.select, Maven-Artefakt com.vaadin:vaadin-select-flow.

Verhalten ​

Ein Klick auf das Select-Feld oder die Ausklappen-Taste rechts öffnet die Select-Liste. Die Liste enthält alle verfügbaren Auswahloptionen. Es kann immer nur jeweils eine Option ausgewählt werden. Sobald der Nutzer eine Option wählt, klappt die Liste automatisch ein und die gewählte Option wird als Text im Select-Feld angezeigt. Wenn die Liste erneut aufgeklappt wird, ist die ausgewählte Option hervorgehoben. Durch Klick auf eine andere Option wird die Auswahl neu gesetzt.

Die Optionen in der Select-Liste können bei Bedarf formatiert werden. Wenn Optionen länger sind als die Breite des Select-Feldes, können sie in der Auswahlliste umbrechen und mehrzeilig werden. Wenn eine solche Option ausgewählt wird und im Select-Feld oben als gewählte angezeigt wird, wird diese entsprechend auf den verfügbaren Platz gekürzt, sodass nur die erste Zeile sichtbar ist.

Validierung ​

Die Validierung erfolgt, sobald der Nutzer eine Option auswählt, und spätestens beim Verlassen des Feldes. Wird die Liste mit der Escapetaste ( Esc ) oder der Tabulatortaste ( Tab ) geschlossen, ohne dass eine Auswahl getroffen wurde, wird erst beim Verlassen des Feldes geprüft. Ist der Wert ungültig, wird das Select-Feld rot hervorgehoben und eine Fehlermeldung erscheint unterhalb des Feldes.

Die Prüfung läuft in zwei Stufen. Die Pre-Submit-Validierung prüft das einzelne Feld, sobald es den Fokus verliert, und zeigt den Fehler unmittelbar unterhalb des Feldes. Die Post-Submit-Validierung läuft, nachdem der Nutzer das Formular abgeschickt hat: Sie prüft alle Felder erneut, markiert die fehlerhaften und setzt den Fokus auf das erste davon. Beide Stufen und die Formulierung der Fehlermeldungen sind unter Validierung unter Formulare beschrieben.

Als Constraint steht ausschließlich Required zur Verfügung: Das Feld wird ungültig, wenn keine Option ausgewählt ist. Da der Nutzer nur aus vorgegebenen Optionen wählen kann, entsteht kein ungültiger Wert; Format- und Wertebereichsprüfungen wie bei den Texteingabefeldern entfallen. Ein Select im State Read Only gilt immer als gültig.

States ​

broken_image
Figma

Enabled

Ein Select im State Enabled dient der Auswahl einer Option aus einer Liste und kann vom Nutzer bedient werden. Die Auswahlliste kann beliebig oft aus- oder eingeklappt werden und die Auswahl ist durch den Nutzer änderbar.

broken_image
Figma

Disabled

Ein Select-Feld kann Disabled sein, wenn es sich durch bestimmte Vorbedingungen (noch) nicht ändern lässt. Es wechselt erst in den State Enabled, wenn die Vorbedingungen erfüllt sind. Ein Select-Feld im State Disabled lässt sich nicht durch den Nutzer aufklappen oder ändern.

Beispiel für einen Anwendungsfall mit einem Select-Feld im State Disabled: Ein Formular enthält ein Select mit dem Label "Grund für die Unzufriedenheit". Dieses ist zunächst Disabled. Oberhalb des Select befindet sich eine Auswahlmöglichkeit bei der der Nutzer angeben kann, ob er zufrieden oder unzufrieden ist. Wenn der Nutzer angibt, dass er zufrieden ist, bleibt das Select Disabled. Wenn der Nutzer angibt, dass er unzufrieden ist, wechselt das Select in den State Enabled und der Nutzer kann den Grund für die Unzufriedenheit auswählen.

broken_image
Figma

Read Only

Ein Select-Feld kann für den Nutzer auf Read Only gesetzt sein. In diesem Fall dient das Select lediglich als Anzeige der gewählten Option. Die Auswahlliste kann nicht geöffnet werden und die gewählte Option kann nicht durch den Nutzer geändert werden. Im Unterschied zum Select im State Disabled, kann ein Select im State Read Only nicht unter bestimmten Bedingungen in den State Enabled wechseln.

broken_image
Figma

Hover

Ein Select-Feld im State Enabled wird hervorgehoben, wenn der Nutzer den Mauszeiger über das Feld bewegt.

broken_image
Figma

Focus

Die gesamte Select-Liste kann fokussiert werden. Der Fokus kann über die Tastaturbedienung gesetzt werden. Ist Textinhalt vorhanden, wird dieser beim Fokus der Select-Liste ausgewählt.

broken_image
Figma

Error

Wenn die Validierung ein fehlerhaftes Ergebnis liefert, wird das Select-Feld entsprechend hervorgehoben. Im State Error wird das Select-Feld rot eingefärbt. Unterhalb des Select-Feldes kann der Fehlerhinweis in Textform angezeigt werden.

Barrierefreiheit ​

Tastaturbedienung ​

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist ein Select-Feld fokussierbar. Einzelne Optionen lassen sich dann mit den Pfeiltasten ansteuern.

Ist eine Option im Fokus, kann diese mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden.

Spezifische Hinweise ​

Die Komponente stellt selbst bereit: die Verknüpfung des sichtbaren Labels mit dem Select-Feld, die Kennzeichnung von Pflichtfeldern über aria\-required und die Verknüpfung von Helper text und Fehlermeldung über aria\-describedby . Sie meldet außerdem, ob die Liste geöffnet ist, und führt den Fokus: Beim Öffnen wandert er in die Liste auf die aktuell gewählte Option, beim Schließen kehrt er auf das Select-Feld zurück. Nichts davon wird nachgebaut. Das Produktteam verantwortet die Inhalte:

  • Da jedes Eingabefeld ein Label haben muss, ist kein zusätzliches aria\-label nötig. Ein am Feld gesetztes aria\-label ersetzt den Namen aus dem sichtbaren Label und darf deshalb nur bei Feldern ohne sichtbares Label verwendet werden.
  • Der Bedienhinweis des Select ist kein Placeholder im Sinne eines Text Field: Er wird als Inhalt des Feldes dargestellt und geht in den Namen ein, den Screenreader vorlesen. Ein sichtbares Label ersetzt er trotzdem nicht.
  • Ein Feld, das dauerhaft nur der Anzeige dient, wird auf Read Only gesetzt: Es bleibt fokussierbar, für Screenreader sichtbar und sein Wert kopierbar. Ein Feld, das im Laufe des Prozesses wieder bearbeitbar werden kann, wird auf Disabled gesetzt: Es ist nicht fokussierbar und für Screenreader unsichtbar und eignet sich deshalb nicht zur Anzeige von Informationen. Siehe States .
  • Fehlermeldung: Die Verknüpfung mit dem Select-Feld stellt die Komponente her. Das Produktteam verantwortet den Text — er muss sagen, wie der Fehler zu beheben ist (z.B. "Option auswählen" , nicht nur "Fehler" ), und der Fehler darf nicht ausschließlich über Farbe kommuniziert werden.
  • Pflichtfeld-Kennzeichnung: Wie Pflichtfelder gekennzeichnet und erklärt werden, regelt Formulare .