Radio
The e-radio-group and e-radio components handle exclusive selection inside the shared field system, including validation, row or column layout, and centralized color, disabled, and readonly behavior.
Use this page to validate grouped choice flows before wiring release tracks, environments, or preference selections into production forms.
Usage
Use this baseline playground to configure group behavior in context: row layout, color, outlined, disabled, readonly, tonal, and retain-color.
Layout and direction
Compare row and column layouts to match density, label length, and available horizontal space.
Visual variants
Compare default, outlined, tonal, retain-color, disabled, and readonly group states to keep exclusive selection clear in dense forms.
Mandatory selection
Use mandatory when the group must always resolve to one valid option, even if the incoming model is empty.
Named slots
Use the label slot on both e-radio-group and e-radio when the copy needs richer inline content.
Validation
Validate required choice flows with explicit submit-state feedback before continuing a critical configuration step.
Submit to validate the radio group rule.
Props
Use the API table as the source of truth for ERadioGroup and ERadio props, defaults, and inherited field behavior.
| Property | Type | Default |
|---|---|---|
| ERadioGroup.modelValue | string | number | null | undefined | undefined |
Current selected value for the group. A child radio is active when its modelValue matches this value exactly. | ||
| ERadioGroup.mandatory | boolean | false |
When enabled and no valid selection exists, initializes the first available radio on mount. | ||
| ERadioGroup.row | boolean | false |
Lays out child radios horizontally. When omitted, the group is rendered as a column. | ||
| ERadioGroup.tonal | boolean | false |
Shows field overlay styling on the group container without changing selection behavior. | ||
| clearable | boolean | false |
Shows clear action when a value exists. | ||
| color | string | "primary" |
Base theme color applied to field state and interactions. | ||
| outlined | boolean | false |
Uses outlined visual variant for the field container. | ||
| disabled | boolean | false |
Disables interaction and prevents value updates. | ||
| readonly | boolean | false |
Prevents editing while preserving focus behavior. | ||
| dense | boolean | false |
Applies denser vertical spacing inherited from Field. | ||
| retainColor | boolean | false |
Keeps active color styling after focus/interaction. | ||
| label | string | number | undefined |
Field label text. | ||
| labelMinWidth | string | number | undefined |
Minimum width reserved for label region. | ||
| labelBehavior | "static" | "static" |
Label behavior is static for radio group controls. | ||
| inputAlign | left | right | center | start | end | "start" |
Horizontal text alignment inside input/selection area. | ||
| prependIcon | string | IconPath | IconPath[] | undefined |
Icon rendered in outer-left affix region. | ||
| prependInnerIcon | string | IconPath | IconPath[] | undefined |
Icon rendered before content inside input frame. | ||
| appendInnerIcon | string | IconPath | IconPath[] | undefined |
Icon rendered after content inside input frame. | ||
| appendIcon | string | IconPath | IconPath[] | undefined |
Icon rendered in outer-right affix region. | ||
| detail | string | undefined |
Helper text shown in details area when no errors are present. | ||
| detailsOnMessageOnly | boolean | false |
Shows details area only when messages/errors exist. | ||
| rules | FieldRule | undefined |
Validation rules evaluated against modelValue. | ||
| detailErrors | string[] | undefined |
Explicit error messages rendered in details area. | ||
| ERadio.modelValue | string | number | null | undefined | undefined |
Value represented by the individual option. This must be used inside ERadioGroup. | ||
| ERadio.label | string | number | undefined |
Visible label text for the individual option. | ||