Darstellung

Dropdown-Menüs werden eingesetzt, um im geöffneten Zustand mehrere Optionen kompakt zur Auswahl anzubieten. Die gewählte Option wird anschliessend im geschlossenen Zustand angezeigt. Ein Dropdown-Pfeil zeigt, dass sich mit dem Selektionsfeld eine versteckte Auswahlliste öffnen lässt. Auf mobilen Geräten kann bei Bedarf auf die native Auswahlfunktion zugegriffen.

Dropdown besteht aus dem initialen Eingabefeld, der Auswahlliste im geöffneten Zustand und den einzelnen Menu-Einträgen.

Es gibt mehrere Varianten von Dropdowns:

• Einfache Auswahl
• Mehrfach-Auswahl (mit Button zur Bestätigung der Auswahl).
• Einfach- / Mehrfach-Auswahl mit einer integrierten Filtersuche für umfangreiche Listen.

Auswahlliste

Die Auswahlliste besteht jeweils aus den Menueinträgen, die horizontal gelistet werden.

Einträge im Menu

Für die Einträge im Menu gilt:

• Sie können mit einer Trennlinie gruppiert werden.
• Sie haben in der Mehrfach-Auswahl einen «ausgewählt» Status und werden mit einem Häkchen markiert.
• Sie können mit einem Icon ergänzt werden.

Verhalten

• Initial wird ein geschlossenes Element mit einem Label angezeigt.
• Per Klick öffnet sich die Auswahlliste.
• Wurde eine Auswahl getroffen, so wird das geschlossene Element mit der Auswahl folgendermassen ergänzt:
  • Einfach-Auswahl: das Label wird verkleinert und die Auswahl wird darunter aufgeführt.
  • Mehrfach-Auswahl: das Label wird verkleinert und die Anzahl der gewählten Elemente wird darunter aufgeführt. Im Falle einer Suchmaske sollen die gewählten Elemente als Tags/Chips in oder unter der Suchmaske aufgeführt werden (siehe Tags und Chips und Filtern und Suchen).

Verwendung

Wir verwenden das Dropdown-Auswahlfeld, wenn wir eine Auswahl einer oder mehrerer Optionen aus einer vorgegebenen Liste anbieten.

Ein Dropdown setzen wir ein, wenn Nutzende eine Auswahl treffen müssen, bei der sich die Einträge gegenseitig ausschliessen und kein Defaultwert gesetzt werden soll. Dies ist etwa beim Radiobutton der Falle (siehe Radiobutton und Checkbox).

Dropdowns eignen sich für eine grosse Anzahl Auswahlmöglichkeiten.

Eine Suchfeld nutzen wir, wenn die im Dropdown zur Auswahl stehenden Begriffe bekannt sind und es sehr viele Begriffe sind.