<dt-radio-group model-value="" name="fruits-radio-group-01" legend="Fruits" > <dt-radio value="apple"><span >Apple</span></dt-radio> <dt-radio value="banana"><span >Banana</span></dt-radio> <dt-radio value="other"><span >Other</span></dt-radio> </dt-radio-group>
Passing in Radio components programmatically using an options object.
<dt-radio-group v-model="selectedFruits" name="fruits-radio-group" legend="Fruits" > <dt-radio v-for="option in options" :key="option.value" :value="option.value" > <span>{{ option.label }}</span> </dt-radio> </dt-radio-group>
When no legend is provided it is expected that an aria-label is passed into the component.
<dt-radio-group name="fruits-radio-group" aria-label="Fruits" > <dt-radio value="pear">Pear</dt-radio> <dt-radio value="kiwi">Kiwi</dt-radio> </dt-radio-group>
The legend can also be passed by slot.
<dt-radio-group name="fruits-radio-group" > <dt-radio value="pear">Pear</dt-radio> <dt-radio value="kiwi">Kiwi</dt-radio> <template #legend> Fruits </template> </dt-radio-group>
The event handler is only needed if you need to do additional processing. The v-model is automatically updated.
<dt-radio-group v-model="selectedFruits" name="fruits-radio-group" legend="Fruits" @update:model-value="onInput" > <dt-radio value="pear">Pear</dt-radio> <dt-radio value="kiwi">Kiwi</dt-radio> </dt-radio-group>
<div> <dt-radio-group name="radio-group-with-positive-message" legend="With Positive Message" :messages='[{"message":"Positive validation message","type":"positive"}]' > <dt-radio value="apple"><span >Apple</span></dt-radio> <dt-radio value="banana"><span >Banana</span></dt-radio> <dt-radio value="other"><span >Other</span></dt-radio> </dt-radio-group> </div> <div> <dt-radio-group name="radio-group-with-warning-message" legend="With Warning Message" :messages='[{"message":"Warning validation message","type":"warning"}]' > <dt-radio value="apple"><span >Apple</span></dt-radio> <dt-radio value="banana"><span >Banana</span></dt-radio> <dt-radio value="other"><span >Other</span></dt-radio> </dt-radio-group> </div> <div> <dt-radio-group name="radio-group-with-critical-message" legend="With Critical Message" :messages='[{"message":"Critical validation message","type":"critical"}]' > <dt-radio value="apple"><span >Apple</span></dt-radio> <dt-radio value="banana"><span >Banana</span></dt-radio> <dt-radio value="other"><span >Other</span></dt-radio> </dt-radio-group> </div>
Radio Groups are typically paired with a legend which identifies the group. If no legend is provided then it is expected
that an aria-label will be given in order to provide an invisible label to screen readers.
import { DtRadioGroup } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | slot for Input Group Components |
legend | slot for Input Group Legend |
Name
|
Default
|
Type
|
|---|---|---|
name
required
| string The name of the input group | |
dataQaGroup | 'radio-group' | string A data qa tag for the radio group |
dataQaGroupLegend | 'radio-group-legend' | string A data qa tag for the radio group legend |
dataQaGroupMessages | 'radio-group-messages' | string A data qa tag for the radio group messages |
disabled | false |
"true"
|
"false"
Disables the input group |
id | generated unique ID | string The id of the input group |
legend | '' | string The legend of the input group |
legendChildProps | {} | object A set of props that are passed into the legend element |
legendClass | '' | string|array|object Used to customize the legend element |
messages | [] | array Validation messages |
messagesChildProps | {} | object A set of props that are passed into the messages container |
messagesClass | '' | string|array|object Used to customize the messages container |
modelValue | '' | string|number A provided value for the radio group |
showMessages | true |
"true"
|
"false"
Show validation messages |
value | null | string|number|boolean|object The value of the input group |
Name
|
Type
|
|---|---|
update:modelValue | String | Number Event fired to sync the modelValue prop with the parent component |
Radio Group documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope