Auswahl-Karten (Choicebox)
Radio- oder Mehrfachauswahl als Karten mit Titel, Beschreibung, optionalem Icon und Badge — Tastatur-fähig, emittiert selection
Beispiele
Einfachauswahl (Radio-Karten)
Versandart
Mehrfachauswahl mit deaktivierter Karte
Zusatzleistungen
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Label |
| multiple | boolean | false | Mehrfachauswahl |
| columns | number | 2 | Spalten (ab md) |
| options * | array | — | Karten |
| spacing | string: default | none | sm | md | lg | xl | "default" | Eigenabstand |
* 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 |
|---|---|
--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.hairlinecolor.action.primarycolor.border.strongcolor.surface.defaultcolor.text.defaultcolor.text.mutedduration.fasteasing.standardfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultradius.fullradius.surfacesize.12size.4size.6size.8text.mdtext.smweight.mediumweight.semibold