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).

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 ​

Eine 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 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 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 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. Wenn eine Option gewählt wurde, kann sich optional links neben der Aufklappen-Schaltfläche ein Löschen-Icon ("X") befinden, dass die Auswahl zurücksetzt. 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.

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

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.

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.

States ​

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

Aktiv

Eine aktive ComboBox 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 ComboBox 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 ComboBox rot. Unterhalb der ComboBox kann der Fehlerhinweis in Textform angezeigt werden.
Read-only

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

Barrierefreiheit ​

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist das Eingabefeld einer 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.

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-combo-box--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter:

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.ComboBox;

Variants ​

Default ​

java
ComboBox<String> comboBox = new ComboBox<>("Label");
comboBox.setItems("Item 1", "Item 2", "Item 3", "Item 4", "Item 5");
comboBox.setHelperText("Helper text");

Required ​

java
ComboBox<String> comboBox = new ComboBox<>("Required");
comboBox.setItems("Item 1", "Item 2", "Item 3");
comboBox.setRequired(true);

Disabled ​

java
ComboBox<String> comboBox = new ComboBox<>("Disabled");
comboBox.setItems("Item 1", "Item 2", "Item 3");
comboBox.setEnabled(false);

Read Only ​

java
ComboBox<String> comboBox = new ComboBox<>("Read only");
comboBox.setItems("Item 1", "Item 2", "Item 3");
comboBox.setValue("Item 1");
comboBox.setReadOnly(true);

Invalid ​

java
ComboBox<String> comboBox = new ComboBox<>("Invalid");
comboBox.setItems("Item 1", "Item 2", "Item 3");
comboBox.setInvalid(true);
comboBox.setErrorMessage("Error message");

Custom Value ​

Allows the user to enter a value not present in the list.

java
ComboBox<String> comboBox = new ComboBox<>("Browser");
comboBox.setItems("Chrome", "Edge", "Firefox", "Safari");
comboBox.setHelperText("Select or type a browser");
comboBox.setAllowCustomValue(true);