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.

Select

Verwendung

👍 Do

👎 Don't

...wenn Nutzer aus einer langen Liste (min. 13, max. 200 Einträge) ein einzelnes Elemente 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 zwei 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 Nuzer 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

Ein Select besteht immer aus einem Label und einem Feld, das sich über eine Taste aufklappen lässt. Das Label befindet sich oberhalb des Select-Feldes, sollte dem Nutzer den Zweck des Select-Feld klar machen und möglichst kurz, präzise und dabei trotzdem klar und eindeutig sein. Optional kann das Select-Feld einen Platzhaltertext enthalten, der als Bedienhinweis dient. Wenn der Bedienhinweis nicht vorhanden ist und noch keine Option durch den Nutzer gewählt wurde, ist das Select-Feld standardmäßig leer. Auf der rechten Seite innerhalb des Select-Feldes befindet sich die Taste 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.

Select Feld

Ausgeklapptes Select-Feld mit Selektion

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

Ausgeklapptes Select-Feld mit Selektion in gruppierter Listbox

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 entprechend auf den verfügbaren Platz gekürzt, sodass nur die erste Zeile sichtbar ist.

States

Aktiv

Ein aktives Select 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.

Disabled

Ein Select-Feld kann inaktiv sein, wenn es sich durch bestimmte Vorbedingungen (noch) nicht ändern lässt. Es wird erst aktiv, wenn die Vorbedingungen erfüllt sind. Ein inaktives Select-Feld lässt sich nicht durch den Nutzer aufklappen oder ändern.

Beispiel für einen Anwendungsfall mit inaktivem Select-Feld: Ein Formular enthält ein Select mit dem Label "Grund für die Unzufriedenheit". Dieses ist zunächst inaktiv. 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 inaktiv. Wenn der Nutzer angibt, dass er unzufrieden ist, wird das Select aktiv und der Nutzer kann den Grund für die Unzufriedenheit auswählen.

Read Only

Ein Select-Feld kann für den Nutzer gesperrt 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 inaktiven Select, kann das gesperrte Select nicht unter bestimmten Bedingungen aktiv werden.

Hover

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

Fokus

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.

fehler

Wenn die Validierung ein fehlerhaftes Ergebnis liefert, wird das Select-Feld entsprechend hervorgehoben. Im Fehlerzustand 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.

Code Examples

Install

Maven

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-select-flow</artifactId>
</dependency>

Import

import com.vaadin.flow.component.select.Select;

Variants

Default

Select<String> select = new Select<>();
select.setLabel("Status");
select.setHelperText("Bitte auswählen");
select.setItems("Option 1", "Option 2", "Option 3");
select.setNoVerticalOverlap(true);

Required

Select<String> select = new Select<>();
select.setLabel("Pflichtfeld");
select.setItems("Option 1", "Option 2", "Option 3");
select.setRequiredIndicatorVisible(true);
select.setNoVerticalOverlap(true);

Read Only

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

Disabled

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

Invalid

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