Tag Input
Freitext-Tags als Chips: Komma und Enter schließen einen Tag ab, Einfügen mehrerer Werte legt alle auf einmal an. Vorschläge, Duplikatprüfung, maxTags und eine eigene Validierung halten die Liste sauber.
Im Field
Komma oder Enter schließen einen Tag ab, Backspace bei leerem Feld entfernt den letzten. Die Chips stammen aus derselben Komponente wie die Mehrfach-Combobox.
Gewählt: Design, Frontend
Vorschläge
Beim Tippen filtert die Liste nach Teilstrings; Pfeiltasten bewegen die Auswahl, Enter übernimmt sie. Bereits gewählte Werte erscheinen nicht erneut.
Duplikate, Grenzen und Validierung
Duplikate werden unabhängig von Groß-/Kleinschreibung abgelehnt. maxTags und validate melden den Grund barrierefrei über eine Live-Region; nichts verschwindet stillschweigend.
Beispiel: „React“, „CSS“.
Größen und Zustände
Die Höhen folgen der Control-Skala; der Rahmen wächst mit den Chips. Deaktivierte Felder bleiben lesbar.
Playground
Größe, Vorschläge, Grenze und Zustand frei kombinieren.
Barrierefreiheit
Das Eingabefeld ist eine Combobox mit steuerbarer Vorschlagsliste (aria-expanded, aria-controls, aria-activedescendant). Jeder Chip hat einen Entfernen-Button mit zugänglichem Namen.
Ablehnungsgründe werden über eine Live-Region angesagt. Tastaturbedienung und Zeigerbedienung sind gleichwertig.