Combobox (Select mit Suche)
Einzelauswahl mit Suchfilter und Options-Panel: Tastatur-Navigation (Pfeile/Enter), Escape/Außenklick schließen, optionale Beschreibungen pro Option
Nutzt: ui.icon
Beispiele
Einzelauswahl mit Suche und Beschreibungen (Pfeiltasten + Enter)
Zuständiges Team
Keine Treffer
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Label |
| placeholder | string | "Auswählen …" | Platzhalter |
| searchPlaceholder | string | "Suchen …" | Such-Platzhalter |
| options * | array | — | Optionen |
* Pflicht-Prop
Events & Slots
Events:
⚡ change — im Surface per on: {<event>: {action, params}} verdrahtbar.
Genutzte Design-Tokens
border.hairlinecolor.action.primarycolor.border.defaultcolor.surface.overlaycolor.surface.sunkencolor.text.defaultcolor.text.mutedelevation.overlayfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultform.backgroundform.borderform.border-hoverform.placeholderlayer.dropdownradius.controlradius.smsize.1size.2size.3size.32text.mdtext.smweight.medium
LLM-Notizen
component.combobox
Einzelauswahl mit Suchfilter. Ergänzung zu ui.select (kurze Listen) und component.multi-select (Mehrfachauswahl).
Wann nutzen
- Listen ab ~8 Optionen oder wenn Optionen Beschreibungen brauchen.
- Modell-/Team-/Kunden-Wahl in App-Fenstern.
Wichtige Props
options=[{label, description?, icon?, active?}]— genau einactive= Vorauswahl.label,placeholder,searchPlaceholder.
Beispiel-Node
{"definition": "component.combobox", "props": {"label": "Modell", "options": [{"label": "Opus 4.8", "description": "stark, langsamer", "active": true}, {"label": "Haiku", "description": "schnell"}]}}
Hinweise
- Tastatur: Pfeile navigieren, Enter wählt, Escape schließt. Emittiert
changemit{value}.