Combobox
Suchfeld mit Trefferliste, einfach oder mehrfach, mit asynchroner Quelle und optionalem Anlegen neuer Werte. Das Feld ist so hoch wie Input und Button; die Bedienung kommt vollständig von Base UI.
Größen
sm, md und lg folgen den Dichte-Tokens und sind exakt so hoch wie Input und Button derselben Größe.
Zustände
Invalid setzt aria-invalid und den Danger-Ring; disabled bleibt sichtbar, ist aber nicht bedienbar.
Städte-Suche
Tippen filtert ohne Rücksicht auf Großschreibung und Akzente: „zurich“ findet „Zürich“. Die eigene Zeilendarstellung zeigt zusätzlich die Region.
Mehrfachauswahl als Tags
Gewählte Werte erscheinen als Chips mit Entfernen-Button. Backspace im leeren Feld entfernt den letzten Wert; die Chips umbrechen. Passen sie nicht in zwei Zeilen, fasst ein „+n“-Chip die restlichen Werte zusammen.
Kontrolliert
Gewählt: 2
Viele Werte in enger Breite
Asynchrone Suche
Die Quelle wird 200 ms entprellt abgefragt. Während der Anfrage dreht ein Spinner im Feld; veraltete Antworten werden verworfen.
Im Field
Label, Beschreibung und Fehler verknüpfen sich automatisch mit dem Suchfeld.
Bestimmt deine Standardregion.
Einfachauswahl kontrolliert
Der Wert liegt im State; die Anzeige daneben zeigt den aktuellen Callback-Wert.
Gewählt: zurich
Playground
Größe und Zustand umschalten.
Popup am unteren Rand
Das Popup weicht der Bildschirmtastatur aus: Es öffnet sich über dem Feld, bleibt im sichtbaren Viewport und scrollt die Trefferliste intern.
Barrierefreiheit
Das Suchfeld ist ein Combobox-Input. Pfeiltasten bewegen die Hervorhebung, Enter wählt, Escape schließt und setzt den Fokus zurück. Chips tragen einen eigenen Entfernen-Button mit zugänglichem Text.
Für kurze, feste Listen ohne Suche bleibt Select die ruhigere Wahl; die Combobox lohnt sich bei vielen Einträgen, asynchronen Quellen und Mehrfachauswahl.