e8-form-radio-group
Updated on Sep 18, 2025 11 minutes to readA radio group component with optional button mode, stacked layout, and custom variant colors.
e8-form-radio-group allows users to select a single value from a set of options.
It supports standard radio buttons, optional button-style rendering, stacked layout, and variant coloring.
<e8-form-radio-group
v-model="vars.selectedOption"
label="Choose an option"
tooltip="Select one of the available choices"
:options="['Option 1', 'Option 2', 'Option 3']"
mode="buttons"
stacked="true"
variant="success"
></e8-form-radio-group>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| label | Label text for the radio group; set to false to hide label. | string | boolean | — |
| mode | Render mode. | E8FormRadioGroupModes | 'default' |
| options | List of available options. | E8FormInputOptionsType | — |
| readonly | Makes the input non-editable. | boolean | false |
| size | Size of the control. | E8ElementSizes | 'default' |
| stacked | Display options stacked vertically instead of inline. | boolean | false |
| tooltip | Tooltip text displayed below the group. | string | — |
| variant | Color variant of the button in button mode. | E8ButtonColorVariants | 'primary' |
| v-model | Two-way bound selected value. | string | number | — |
| visible | Controls component visibility. | boolean | true |
Slots
| Slot | Description |
|---|---|
| label | Custom label slot. Provides { label, value } as slot props. |
Events
| Event | Description |
|---|---|
| on-change | Called whenever the selected value changes. |