Auswahl-Karten (Choicebox) — component.choice-box

Componentv1.1.0Formulareweb.documentweb.applicationdesktop.shellbuilder.preview

Beispiele

Einfachauswahl (Radio-Karten)

Versandart

Mehrfachauswahl mit deaktivierter Karte

Zusatzleistungen

Eigenschaften

Prop	Typ	Default
`label`	string	`""`
`multiple`	boolean	`false`
`columns`	number	`2`
`options *`	array	`—`
`spacing`	string: default \| none \| sm \| md \| lg \| xl	`"default"`

Events & Slots

Events: selection

Stellschrauben (Komponenten-Tokens)

Token	Default
`--choice-box-action-primary`	`var(--color-action-primary)`
`--choice-box-border-strong`	`var(--color-border-strong)`
`--choice-box-focus-ring-color`	`var(--focus-ring-color)`
`--choice-box-focus-ring-offset`	`var(--focus-ring-offset)`
`--choice-box-focus-ring-width`	`var(--focus-ring-width)`
`--choice-box-radius-full`	`var(--radius-full)`
`--choice-box-radius-surface`	`var(--radius-surface)`
`--choice-box-surface-default`	`var(--color-surface-default)`
`--choice-box-text-default`	`var(--color-text-default)`
`--choice-box-text-muted`	`var(--color-text-muted)`

Genutzte Design-Tokens

border.hairline color.action.primary color.border.strong color.surface.default color.text.default color.text.muted duration.fast easing.standard focus.ring-color focus.ring-offset focus.ring-width font.family.default radius.full radius.surface size.12 size.4 size.6 size.8 text.md text.sm weight.medium weight.semibold