Version:

Multi-Select Combo Box ​

Die Multi-Select Combo Box kombiniert Eingabefeld und Multi-Select-Liste.

Overview ​

Intro ​

Hinweis:

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

Eine Multi-Select Combo Box bietet dem Nutzer die Möglichkeit einen oder mehrere Werte aus einer Liste auszuwählen. Die Komponente unterstützt dieselben Funktionen wie die reguläre Combo Box, beispielsweise Eingrenzung der Liste durch Texteingabe (Filterfunkion), Lazy Loading oder die Eingabe benutzerdefinierter Werte.

broken_image
Figma

Beispiel Multi-Select Combo Box

Verwendung ​

👍 Do👎 Don't
... wenn Nutzer aus einer langen Liste (min. 13 Optionen) mehrere Optionen auswählen können sollen, 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 Nutzer aus einer langen Liste (min. 13 Optionen) nur eine Option auswählen müssen. Nutze hierfür die reguläre Combo Box oder die Select-Komponente.
... 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.
... wenn Nutzer aus einer kleinen Anzahl (max. 12) von Optionen mehrere Optionen wählen müssen. Dafür ist die Checkbox Group 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 Select-Liste schwer zu überblicken.

Guidelines ​

Aufbau ​

Die Multi-Select Combo Box setzt sich aus folgenden Bestandteilen zusammen. Label, Eingabefeld, Ausklappen-Schaltfläche und Auswahlliste sind immer vorhanden, Chips und Overflow-Chip erscheinen mit der getroffenen Auswahl; 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 Multi-Select 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.
  • 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.
  • Chips — je gewählter Option ein Chip im Eingabefeld, bestehend aus der Beschriftung der Option und einer Schaltfläche zum Entfernen.
  • Overflow-Chip — steht links vor den übrigen Chips und zeigt als Anzahl an, wie viele gewählte Optionen im Feld keinen Platz mehr finden. Ob die Chips zusammengefasst werden oder das Feld mit ihnen wächst, regeln die Varianten Auto Expand und Overflow.
  • 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) — dient als Bedienhinweis und wird nur angezeigt, solange keine Option gewählt ist. Er ist nur zu verwenden, wenn kein Helper text möglich ist, und ersetzt kein sichtbares Label.
  • 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.
  • Clear button (optional) — erscheint links neben der Ausklappen-Schaltfläche, sobald mindestens eine Option gewählt ist, und setzt die gesamte Auswahl zurück. Der Button selbst ist nicht tastaturfokussierbar.
  • Required indicator (bei Bedarf) — Pflichtfelder werden durch einen Indikator neben dem Label gekennzeichnet. Die Kennzeichnung und ihre Erläuterung regelt Formulare .

Prefix- und Suffix-Elemente gibt es nicht: Der Platz im Feld ist durch Chips, Overflow-Chip, Clear button und Ausklappen-Schaltfläche belegt. Ist kein Bedienhinweis gesetzt und hat der Nutzer noch keine Option gewählt, ist die Multi-Select Combo Box leer.

broken_image
Figma		Multi-Select Combo Box ohne Bedienhinweis
broken_image
Figma		Multi-Select Combo Box mit Bedienhinweis

Die Anordnung des Feldes im Formular und seine Spaltenbelegung regelt das Form Layout ; welche Breite eine Multi-Select Combo Box mindestens braucht, steht unter Anordnung.

Info für Dev

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

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

In Flow ist es die Klasse MultiSelectComboBox aus dem Paket com.vaadin.flow.component.combobox. Sie liegt im selben Maven-Artefakt com.vaadin:vaadin-combo-box-flow wie die Combo Box.

Varianten/Typen ​

broken_image
Figma		Multi-Select Combo Box mit Auto Expand
broken_image
Figma		Multi-Select Combo Box mit Overflow

Anordnung ​

Plane bei einer Multi-Select Combo Box immer 2 Spalten Breite (Formulare und Filter Panel) ein, damit die Eingabe jederzeit sinnvoll nutzbar bleibt.

broken_image
Figma		Multi-Select Combo Box in Formularen
broken_image
Figma		Multi-Select Combo Box im Filter Panel

Auto Expand ​

👍 Do👎 Don't
broken_image

... wenn die Auswahl sichtbar und überprüfbar sein soll (z. B. vor dem Speichern), ohne dass Nutzer zusätzliche Interaktionen brauchen.
broken_image

... im Filter Panel, weil sie den Filterbereich in der Höhe „aufbläst“. Verwende hier stattdessen die Variante mit Overflow.

Verhalten ​

Ein Klick auf die Multi-Select 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. Sobald der Nutzer auf die Zuklappen-Schaltfläche oder außerhalb der Multi-Select Combobox klickt, klappt die Liste ein und die gewählten Optionen werden als Chips im Eingabefeld angezeigt. Wenn die Liste erneut aufgeklappt wird, sind die ausgewählte Optionen hervorgehoben.

Filter-Funktion ​

Eine Texteingabe im Eingabefeld der Multi-Select 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 Multi-Select Combo Box

Benutzerdefinierte Eingaben ​

Standardmäßig wird die Texteingabe im Eingabefeld der Multi-Select 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 Multi-Select Combo Box können bei Bedarf formatiert werden. Wenn Optionen länger sind als die Breite der Multi-Select Combo Box, können sie in der Auswahlliste umbrechen und mehrzeilig werden. Wenn bei der Auto-Expand Variante eine solche Option ausgewählt wird und im Eingabefeld der Multi-Select Combo Box als gewählt angezeigt wird, wird diese entsprechend auf den verfügbaren Platz gekürzt, sodass nur die erste Zeile sichtbar ist. Bei der Overflow-Variante werden die Chips, die nicht mehr in das Feld passen, durch einen Overflow-Indikator ersetzt, der ihre Anzahl angibt.

Validierung ​

Die Validierung erfolgt, sobald sich die Auswahl ändert — bei jedem Hinzufügen und jedem Entfernen einer Option — und spätestens beim Verlassen des Feldes. Ist die Auswahl ungültig, wird die Multi-Select 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.

Geprüft wird die Auswahl als Ganzes: State Error und Fehlermeldung gelten für das gesamte Feld, nicht für einen einzelnen Chip.

Als Constraint steht ausschließlich Required zur Verfügung: Das Feld wird ungültig, wenn keine einzige Option ausgewählt ist. Eine Mindest- oder Höchstzahl an Auswahlen prüft die Komponente nicht; eine solche Regel verantwortet die Anwendung und meldet sie über die Fehlermeldung des Feldes. Ein Feld im State Read Only gilt immer als gültig.

Eine Texteingabe, die keiner Option entspricht, wird nicht übernommen: Das Eingabefeld wird geleert, die bestehende Auswahl bleibt unverändert. Grenzt die Eingabe die Liste dagegen auf genau einen Eintrag ein, kann dieser Eintrag beim Verlassen des Feldes automatisch in die Auswahl übernommen werden: Das Mate Design System stellt dafür eine Erweiterung bereit, die am einzelnen Feld aktiviert wird und nur greift, wenn keine benutzerdefinierten Eingaben erlaubt sind. Sind benutzerdefinierte Eingaben erlaubt, meldet die Komponente den eingegebenen Text; ob er der Auswahl hinzugefügt wird, entscheidet die Anwendung.

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 Multi-Select Combo Box 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 Multi-Select Combo Box 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 Multi-Select Combo Box rot. Unterhalb der Multi-Select Combo Box kann der Fehlerhinweis in Textform angezeigt werden.
broken_image
Figma		Read Only


Eine Multi-Select Combo Box kann für den Nutzer auf Read Only gesetzt sein. In diesem Fall dient die Multi-Select 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 Multi-Select Combo Box im State Disabled, kann eine Multi-Select Combo Box 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 Multi-Select 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, benennt die gerade angesteuerte Option, ohne den Fokus aus dem Eingabefeld zu nehmen, und sagt jede Änderung der Auswahl zusammen mit der Gesamtzahl der gewählten Einträge an. 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. Sobald Einträge gewählt sind, ersetzt die Komponente den Platzhalter zudem durch die Liste der gewählten Einträge, damit Screenreader die aktuelle Auswahl ausgeben.
  • 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. "Mindestens einen Eintrag 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 .
  • Die Ansagen zur Auswahl sind voreingestellt englisch: dass ein Eintrag hinzugefügt oder entfernt wurde, wie viele Einträge gewählt sind und dass ein fokussierter Chip mit der Rücktaste ( Backspace ) entfernt wird. Diese Texte sind zu übersetzen, sonst hören Screenreader-Nutzer englische Meldungen in einer deutschen Oberfläche.