Combobox (Select mit Suche) — UI-Kit-Galerie

Beispiele

Einzelauswahl mit Suche und Beschreibungen (Pfeiltasten + Enter)

Zuständiges Team

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.

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--combobox-action-primary`	`var(--color-action-primary)`
`--combobox-border-default`	`var(--color-border-default)`
`--combobox-elevation-overlay`	`var(--elevation-overlay)`
`--combobox-focus-ring-color`	`var(--focus-ring-color)`
`--combobox-focus-ring-offset`	`var(--focus-ring-offset)`
`--combobox-focus-ring-width`	`var(--focus-ring-width)`
`--combobox-form-background`	`var(--form-background)`
`--combobox-form-border`	`var(--form-border)`
`--combobox-form-border-hover`	`var(--form-border-hover)`
`--combobox-form-placeholder`	`var(--form-placeholder)`
`--combobox-radius-control`	`var(--radius-control)`
`--combobox-radius-sm`	`var(--radius-sm)`
`--combobox-surface-overlay`	`var(--color-surface-overlay)`
`--combobox-surface-sunken`	`var(--color-surface-sunken)`
`--combobox-text-default`	`var(--color-text-default)`
`--combobox-text-muted`	`var(--color-text-muted)`

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 ein active = 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 change mit {value}.