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ütz dieselben Funktionen wie die reguläre Combo Box, beispielsweise Eingrenzung der Liste durch Texteingabe (Filterfunkion), Lazy Loading oder die Eingabe benutzerdefinierter Werte.

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 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 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 ​

Eine Multi-Select Combo Box besteht immer aus einem Label und einem Feld, das einerseits als Eingabefeld dient und sich andererseits über eine Schaltfläche aufklappen lässt. Das Label befindet sich oberhalb der Multi-Select Combo Box, sollte dem Nutzer den Zweck der Eingabe klar machen und möglichst kurz, präzise und dabei trotzdem klar und eindeutig sein. Optional kann die Multi-Select Combo Box einen Placeholder enthalten, der als Bedienhinweis dient. Wenn der Bedienhinweis nicht vorhanden ist und noch keine Option durch den Nutzer gewählt wurde, ist die Multi-Select Combo Box standardmäßig leer. Auf der rechten Seite innerhalb des Eingabe-Feldes befindet sich die Schaltfläche zum Aufklappen der Liste mit den Auswahloptionen. Die aufgeklappte Liste enthält alle Auswahloptionen und kann optional scrollbar sein, wenn nicht genügend Platz verfügbar ist um alle Optionen gleichzeitig anzuzeigen.

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

Varianten/Typen ​

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

Anordnung ​

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

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

Auto Expand ​

👍 Do👎 Don't
... wenn die Auswahl sichtbar und überprüfbar sein soll(z. B. vor dem Speichern), ohne dass Nutzer:innen zusätzliche Interaktionen brauchen.... 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.

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

States ​

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

Aktiv

Eine aktive Multi-Select Combo Box 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.
Fehler

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-Schalftfläche, das den Validierungsstatus verdeutlicht. Im Fehlerzustand wird die Multi-Select Combo Box rot. Unterhalb der Multi-Select Combo Box kann der Fehlerhinweis in Textform angezeigt werden.
Read-Only

Eine Multi-Select Combo Box kann für den Nutzer gesperrt sein und befindet sich im read-only state. 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 inaktiven Multi-Select Combo Box, kann die read-only Multi-Select Combo Box nicht unter bestimmten Bedingungen aktiv werden.

Barrierefreiheit ​

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist das Eingabefeld einer Multi-Select Combo Box, sowie die Ausklappen-Schaltfläche, 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.

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-combo-box-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.combobox.MultiSelectComboBox;

Variants ​

Default ​

java
MultiSelectComboBox<String> comboBox = new MultiSelectComboBox<>();
comboBox.setLabel("Kategorien");
comboBox.setHelperText("Mehrere Optionen wählbar");
comboBox.setItems("Option 1", "Option 2", "Option 3", "Option 4", "Option 5");
comboBox.select("Option 1", "Option 2");

Required ​

java
MultiSelectComboBox<String> comboBox = new MultiSelectComboBox<>();
comboBox.setLabel("Pflichtfeld");
comboBox.setItems("Option 1", "Option 2", "Option 3");
comboBox.setRequired(true);

Disabled ​

java
MultiSelectComboBox<String> comboBox = new MultiSelectComboBox<>();
comboBox.setLabel("Inaktiv");
comboBox.setItems("Option 1", "Option 2", "Option 3");
comboBox.setEnabled(false);

Read Only ​

java
MultiSelectComboBox<String> comboBox = new MultiSelectComboBox<>();
comboBox.setLabel("Nur lesen");
comboBox.setItems("Option 1", "Option 2", "Option 3");
comboBox.select("Option 1", "Option 2");
comboBox.setReadOnly(true);

Invalid ​

java
MultiSelectComboBox<String> comboBox = new MultiSelectComboBox<>();
comboBox.setLabel("Ungültig");
comboBox.setItems("Option 1", "Option 2", "Option 3");
comboBox.setInvalid(true);
comboBox.setErrorMessage("Bitte mindestens eine Option auswählen.");