Dropdown vs. Select vs. Combobox
Ein Dropdown-Menü führt Aktionen aus. Ein Select wählt aus einer festen Liste. Eine Combobox erlaubt dir auch, zu tippen oder zu suchen.
Verwenden Sie ein Menü für Aktionen. Verwenden Sie ein Auswahlfeld für eine kurze feste Liste. Verwenden Sie ein Kombinationsfeld für eine lange oder durchsuchbare Liste.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Dropdown & Kontextmenü — Lernpaket
Dieses Lernpaket vergleicht Menüs danach, wie sie sich öffnen. Ein Dropdown öffnet sich von einer Steuerung aus. Ein Kontextmenü gehört zu einem Objekt und öffnet sich oft am Zeiger. Das Paket ist kein einheitlicher Menütitel.
DropdownMenu / ContextMenuDie Schaltfläche „Mehr“ öffnet allgemeine Aktionen. Ein Rechtsklick auf eine Datei öffnet nur Aktionen für diese Datei.
- Verwenden Sie es, wenn
- Wähle ein Menü, dessen Auslöser und Objekt zur Aufgabe passen. Baue dann sein Tastatur-Verhalten.
- Nutze es nicht, wenn
- Legen Sie niemals Formularfelder oder die Hauptnavigation der Seite in ein Befehlsmenü.
- In Code verwendeter Name
DropdownMenu / ContextMenu
Auswählen
Ein Select öffnet eine feste Liste und lässt die Person einen Wert auswählen.
Ein Länder-Feld zeigt eine feste Liste und weist Werte außerhalb dieser Liste zurück.
- Verwenden Sie es, wenn
- Verwenden Sie es, wenn die Liste festgelegt, nicht zu lang ist und die Seite wenig Platz hat.
- Nutze es nicht, wenn
- Verwende es niemals für eine lange Liste, die durchsucht werden muss. Verwende stattdessen ein Kombinationsfeld.
- In Code verwendeter Name
<select> / role="listbox"
Bearbeitbare Kombinationsbox
Eine bearbeitbare Combobox ist ein Textfeld mit einer Liste. Die Liste filtert sich, während man tippt.
Geben Sie „Tai“ ein, um Taipei und Tainan anzuzeigen. Verwenden Sie dann die Pfeiltasten, um auszuwählen.
- Verwenden Sie es, wenn
- Verwenden Sie es für lange durchsuchbare Listen, Autovervollständigung oder Auswahlmöglichkeiten, die eine benutzerdefinierte Antwort erlauben.
- Nutze es nicht, wenn
- Nenne ein einfaches Menü oder ein natives Auswahlfeld niemals eine Kombobox, weil sie unterschiedlich funktionieren.
- In Code verwendeter Name
role="combobox" + aria-controls
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| Dropdown & Kontextmenü — LernpaketDropdown & Context Menu — Learning Bundle | Wähle ein Menü, dessen Auslöser und Objekt zur Aufgabe passen. Baue dann sein Tastatur-Verhalten. | Legen Sie niemals Formularfelder oder die Hauptnavigation der Seite in ein Befehlsmenü. | DropdownMenu / ContextMenu |
| AuswählenSelect | Verwenden Sie es, wenn die Liste festgelegt, nicht zu lang ist und die Seite wenig Platz hat. | Verwende es niemals für eine lange Liste, die durchsucht werden muss. Verwende stattdessen ein Kombinationsfeld. | <select> / role="listbox" |
| Bearbeitbare KombinationsboxEditable Combobox | Verwenden Sie es für lange durchsuchbare Listen, Autovervollständigung oder Auswahlmöglichkeiten, die eine benutzerdefinierte Antwort erlauben. | Nenne ein einfaches Menü oder ein natives Auswahlfeld niemals eine Kombobox, weil sie unterschiedlich funktionieren. | role="combobox" + aria-controls |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Dropdown & Kontextmenü — Lernpaket (Dropdown & Context Menu — Learning Bundle), Auswählen (Select), Bearbeitbare Kombinationsbox (Editable Combobox) für unseren echten Nutzerfluss. Nutze diese Regel: Ein Dropdown-Menü führt Aktionen aus. Ein Select wählt aus einer festen Liste. Eine Combobox erlaubt dir auch, zu tippen oder zu suchen. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.