Mehrfach-Select — UI-Kit-Galerie

Beispiele

Multi-Select mit Chips, Suchfilter und Panel (klicken zum Öffnen)

Zuständige Teams

Eigenschaften

Prop	Typ	Default	Builder-Label
label	string	""	Label
placeholder	string	"Auswählen …"	Platzhalter
options *	array	—	Optionen

* Pflicht-Prop

Events & Slots

Events: ⚡ selection — 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
`--multi-select-action-primary`	`var(--color-action-primary)`
`--multi-select-border-default`	`var(--color-border-default)`
`--multi-select-elevation-overlay`	`var(--elevation-overlay)`
`--multi-select-focus-ring-color`	`var(--focus-ring-color)`
`--multi-select-focus-ring-offset`	`var(--focus-ring-offset)`
`--multi-select-focus-ring-width`	`var(--focus-ring-width)`
`--multi-select-form-background`	`var(--form-background)`
`--multi-select-form-border`	`var(--form-border)`
`--multi-select-form-border-hover`	`var(--form-border-hover)`
`--multi-select-form-placeholder`	`var(--form-placeholder)`
`--multi-select-radius-control`	`var(--radius-control)`
`--multi-select-radius-sm`	`var(--radius-sm)`
`--multi-select-status-danger`	`var(--color-status-danger)`
`--multi-select-surface-overlay`	`var(--color-surface-overlay)`
`--multi-select-surface-sunken`	`var(--color-surface-sunken)`
`--multi-select-text-default`	`var(--color-text-default)`
`--multi-select-text-muted`	`var(--color-text-muted)`

Genutzte Design-Tokens

border.hairlinecolor.action.primarycolor.border.defaultcolor.status.dangercolor.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.05size.1size.10size.2size.3size.32size.4text.mdtext.smweight.medium