Radio-Gruppe
Radiobutton-Gruppe mit Optionen-Array — Gruppen-Logik im Element gelöst (ein name, eine Auswahl)
Beispiele
Vertikal mit Auswahl
Horizontal
Fehlerzustand
Deaktiviert
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Gruppen-Label |
| name * | string | — | Feldname |
| options * | array | — | Optionen |
| value | string | "" | Gewählter Wert |
| layout | string: vertical | horizontal | "vertical" | Anordnung |
| disabled | boolean | false | Deaktiviert |
| invalid | boolean | false | Fehlerzustand |
| hint | string | "" | Hinweis/Fehlertext |
* 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 |
|---|---|
--radio-group-action-primary | var(--color-action-primary) |
--radio-group-focus-ring-color | var(--focus-ring-color) |
--radio-group-focus-ring-offset | var(--focus-ring-offset) |
--radio-group-focus-ring-width | var(--focus-ring-width) |
--radio-group-form-error | var(--form-error) |
--radio-group-status-danger | var(--color-status-danger) |
--radio-group-text-default | var(--color-text-default) |
--radio-group-text-disabled | var(--color-text-disabled) |
--radio-group-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
color.action.primarycolor.status.dangercolor.text.defaultcolor.text.disabledcolor.text.mutedfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultform.erroricon.smsize.1state.disabled-opacitytext.mdtext.smtext.xsweight.medium