Combo Box

Die Combo Box kombiniert Eingabefeld und Select-Liste.

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 .

Eine Combo Box bietet dem Nutzer die Möglichkeit einen Wert aus einer Liste direkt auszuwählen (wie bei einer Select-Liste). Außerdem kann die Liste per Texteingabe im Eingabefeld eingegrenzt werden (Filterfunktion). Eine Variante der Combo Box lässt es auch zu, dass der Nutzer einen benutzerdefinierten Text als Option eingibt (analog zum Eingabefeld).

broken_image

Figma

Beispiel ComboBox

Verwendung

👍 Do

👎 Don't

... wenn Nutzer aus einer langen Liste (min. 13 Optionen) eine Option auswählen müssen, welche sie durch das Filtern auf eine Menge kleiner 13 reduzieren können. ... wenn die Listeneinträge keine primäre Information sind und deswegen nicht unmittelbar angezeigt werden müssen. ... wenn Nutzer bei Bedarf die Liste mit den Auswahloptionen durch Texteingabe einschränken können sollen. ... wenn Nutzer in bestimmten Fällen benutzerdefinierte Optionen in Textform eingeben können sollen. ... wenn die Liste kürzer ist. Dann kann sie noch gut vom Nutzer überblickt und komplett dargestellt werden.

... wenn mehr als eine Option ausgewählt werden soll. Nutze hierfür die Multi-Select Combo Box. ... wenn es keinen Sinn macht die Liste mit den Optionen zu durchsuchen. Hierfür ist das normale Select-Element ausreichend. ... Nutzer aus zwei Optionen wählen müssen - im Sinne von ein/aus oder ja/nein. Dafür ist ein einzelnes Checkbox-Element die geeignete Wahl. ... 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 aus einer sehr großen Anzahl von Optionen selbst durch Filtern aus mehr als 13 Optionen wählen müssen, verwende dafür eine Masteransicht oder Lookup (SEIT VERSION 2.1.0). ... wenn die Auswahloptionen ohne weitere Interaktion direkt angezeigt werden sollen. ... wenn die Liste länger ist. Dann ist sie für den Nutzer auch als Dropdownliste schwer zu überblicken.

Guidelines

Aufbau

Die Combo Box setzt sich aus folgenden Bestandteilen zusammen. Label, Eingabefeld, 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 der Combo Box, macht dem Nutzer den Zweck der Eingabe klar und ist möglichst kurz, präzise und dabei trotzdem klar und eindeutig.
• Eingabefeld — nimmt die Texteingabe auf, mit der die Auswahlliste gefiltert wird, und zeigt die gewählte Option an.
• Ausklappen-Schaltfläche — liegt rechts innerhalb des Eingabefeldes und öffnet die Auswahlliste. Sie ist selbst nicht tastaturfokussierbar und für Screenreader ausgeblendet; über die Tastatur öffnet die Pfeiltaste nach unten die Liste aus dem fokussierten Eingabefeld heraus.
• Auswahlliste — wird beim Aufklappen als Overlay unter oder über dem Feld eingeblendet und enthält alle Auswahloptionen. Passen nicht alle Optionen gleichzeitig hinein, scrollt die Liste.
• 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.
• Placeholder (optional) — wird angezeigt, solange das Feld leer ist, und dient als Bedienhinweis. Er ist nur zu verwenden, wenn kein Helper text möglich ist, ersetzt kein sichtbares Label und kann für einen bereits eingegebenen Wert gehalten werden.
• 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. Ein Suffix-Element gibt es nicht, denn die rechte Seite des Feldes ist für Clear button und Ausklappen-Schaltfläche belegt.
• Clear button (optional) — erscheint als Löschen-Icon ("X") links neben der Ausklappen-Schaltfläche, sobald ein Wert gesetzt ist, und setzt die Auswahl zurück. Der Button selbst ist nicht tastaturfokussierbar; bei geschlossener Auswahlliste löscht die Escapetaste den Wert.
• Required indicator (bei Bedarf) — Pflichtfelder werden durch einen Indikator neben dem Label gekennzeichnet. Die Kennzeichnung und ihre Erläuterung regelt Formulare .

Ist kein Bedienhinweis gesetzt und hat der Nutzer noch keine Option gewählt, ist die Combo Box leer.

broken_image Figma	Combobox ohne Bedienhinweis
broken_image Figma	Combobox mit Bedienhinweis
broken_image Figma	Geöffnete Combo Box mit Auswahl

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

Info für Dev

In Web Components ist die Combo Box das Element <vaadin-combo-box> aus dem Paket @vaadin/combo-box. Das Paket ist Bestandteil von @mate/bundles.

In Vue heißt die Komponente MateComboBox und stammt aus dem Paket @mate-vue/combo-box.

In Flow ist es die Klasse ComboBox aus dem Paket com.vaadin.flow.component.combobox, Maven-Artefakt com.vaadin:vaadin-combo-box-flow.

Verhalten

Ein Klick auf die Combo Box fokussiert das bzw. den Text im Eingabefeld und die Liste mit den Auswahloptionen öffnet sich. Sobald der Nutzer eine Eingabe beginnt, werden die Auswahloptionen entsprechend gefiltert und nur Optionen gezeigt, welche die Eingabe des Nutzers enthalten.

Über die Ausklappen-Schaltfläche rechts öffnet sich ebenfalls die Liste mit allen 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 Eingabefeld angezeigt. Wenn die Liste erneut aufgeklappt wird, ist die ausgewählte Option hervorgehoben. Durch Klick auf eine andere Option wird die Auswahl neu gesetzt.

Filter-Funktion

Eine Texteingabe im Eingabefeld der Combo Box führt zum Filtern der Listeneinträge. Das heißt, dass in der Liste nur noch die Auswahloptionen angezeigt werden, die den eingegebenen Text enthalten. Alle anderen Optionen werden ausgeblendet und die Liste wird entsprechend kürzer.

broken_image

Figma

Ablaufschema Filterfunktion Combo Box

Benutzerdefinierte Eingaben

Standardmäßig wird die Texteingabe im Eingabefeld der Combo Box nur verwendet, um die verfügbaren Optionen zu filtern. Es ist jedoch auch möglich, benutzerdefinierte Optionen via Texteingabe zu ermöglichen. In diesem Fall kann der Nutzer einen beliebigen Text eingeben und dieser wird einmalig übernommen. Die benutzerdefinierte Option wird dabei standardmäßig nicht in die Liste der Optionen aufgenommen. Alternativ kann ermöglicht werden, dass die benutzerdefinierte Eingabe dauerhaft gespeichert und in die Liste der Auswahloptionen aufgenommen wird. Hier sollte je nach Anwendungsfall geprüft werden, welche Variante am meisten Sinn macht.

Lazy Loading (Nachladen von Optionen)

Wenn die Liste der Auswahloptionen sehr lang ist, kann es Sinn machen, das sogenannte Lazy Loading zu verwenden. Hier werden zu Beginn nur wenige Optionen geladen und erst wenn der Nutzer beginnt zu scrollen oder über das Eingabefeld die Optionen eingrenzt, werden weitere Optionen nachgeladen.

Formatierung von Optionen in der Auswahlliste

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

Validierung

Die Validierung erfolgt, sobald ein Wert übernommen wird: bei der Auswahl einer Option, beim Bestätigen mit der Eingabetaste ( Enter ) und spätestens beim Verlassen des Feldes. Ist der Wert ungültig, wird die Combo Box 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.

Eine Texteingabe, die keiner Option der Liste entspricht, wird nicht zum Wert: Das Eingabefeld springt beim Schließen der Liste oder beim Verlassen des Feldes auf den zuletzt gültigen Wert zurück, und die Eingabetaste übernimmt weder die Eingabe noch schickt sie das umgebende Formular ab. Grenzt die Eingabe die Liste allerdings auf genau einen Eintrag ein, kann dieser Eintrag beim Verlassen des Feldes automatisch übernommen werden: Das Mate Design System stellt dafür eine Erweiterung bereit, die an der einzelnen Combo Box aktiviert wird und nur greift, wenn keine benutzerdefinierten Eingaben erlaubt sind. Es entsteht dadurch kein ungültiger Wert, der anschließend gemeldet werden müsste. Nur wenn benutzerdefinierte Eingaben erlaubt sind, wird der eingegebene Text als Wert übernommen.

Folgende Constraints werden unterstützt:

Constraint	Verhalten
Required	Das Feld wird ungültig, wenn keine Option ausgewählt ist.
Pattern	Ein regulärer Ausdruck, gegen den der vollständige Wert geprüft wird. Sinnvoll ist er nur dort, wo benutzerdefinierte Eingaben erlaubt sind; bei reiner Auswahl aus der Liste bestimmt die Liste, welche Werte überhaupt entstehen können.

Jedes Constraint sollte eine eigene Fehlermeldung haben, damit der Nutzer spezifisches, umsetzbares Feedback erhält.

Info für Dev

Die automatische Übernahme des einzig verbliebenen Treffers ist nicht Teil der Vaadin-Komponente. Sie stammt aus dem Element <mate-combo-box-addon> im Paket @mate/component-addons, das als Kind-Element in das Feld gelegt wird. Ohne dieses Element gilt das Standardverhalten: Übernommen wird nur ein Text, der einer Option exakt entspricht.

States

Die Darstellung der States Disabled , Hover und Focus entspricht der Standarddarstellung. Siehe States .

broken_image Figma	Enabled Eine ComboBox im State Enabled dient der Auswahl einer Option aus einer Liste und in einigen Fällen auch der benutzerdefinierten Eingabe von Werten durch den Nutzer. Die Auswahlliste kann beliebig oft aus- oder eingeklappt werden und die Auswahl ist durch den Nutzer änderbar.
broken_image Figma	Error Wenn die Validierung ein fehlerhaftes Ergebnis liefert wird die ComboBox entsprechend hervorgehoben. Zusätzlich zur farblichen Kennzeichnung gibt es ein Status-Icon links neben der Aufklappen-Schaltfläche, das den Validierungsstatus verdeutlicht. Im State Error wird die ComboBox rot. Unterhalb der ComboBox kann der Fehlerhinweis in Textform angezeigt werden.
broken_image Figma	Read Only Eine ComboBox kann für den Nutzer auf Read Only gesetzt sein. In diesem Fall dient die ComboBox 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 zur ComboBox im State Disabled, kann eine ComboBox im State Read Only nicht unter bestimmten Bedingungen in den State Enabled wechseln.

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist das Eingabefeld einer Combo Box fokussierbar. Die Ausklappen-Schaltfläche selbst ist nicht fokussierbar; die Liste wird aus dem Eingabefeld heraus mit den Pfeiltasten geöffnet. 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 Eingabefeld, die Kennzeichnung von Pflichtfeldern über das native required am Eingabefeld und die Verknüpfung von Helper text und Fehlermeldung über aria\-describedby . Sie meldet außerdem, ob die Liste geöffnet ist, und benennt die gerade angesteuerte Option, ohne den Fokus aus dem Eingabefeld zu nehmen; nach dem Schließen der Liste bleibt der Fokus im Feld. 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 Platzhalter ist kein Ersatz für das Label und wird nicht zuverlässig vorgelesen. Formathinweise gehören in das Label oder in den Helper text.
• 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 Eingabefeld stellt die Komponente her. Das Produktteam verantwortet den Text — er muss sagen, wie der Fehler zu beheben ist (z.B. "Eintrag aus der Liste 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 .