Mehrfach-Select — component.multi-select

Componentv1.0.0Formulareweb.documentweb.applicationdesktop.shellbuilder.preview

Beispiele

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

Zuständige Teams

Eigenschaften

Prop	Typ	Default
`label`	string	`""`
`placeholder`	string	`"Auswählen …"`
`options *`	array	`—`

Events & Slots

Events: selection

Stellschrauben (Komponenten-Tokens)

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.hairline color.action.primary color.border.default color.status.danger color.surface.overlay color.surface.sunken color.text.default color.text.muted elevation.overlay focus.ring-color focus.ring-offset focus.ring-width font.family.default form.background form.border form.border-hover form.placeholder layer.dropdown radius.control radius.sm size.05 size.1 size.10 size.2 size.3 size.32 size.4 text.md text.sm weight.medium