Radio Group
Radio groups are control elements that allow the user to make a single selection from a list of options.
Preview
Variants #
Default #
<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>
<fieldset class="d-input-group__fieldset"> <legend class="d-label">Fruits</legend> <div> <div> <label> <div class="d-radio-group"> <div class="d-radio__input"><input name="radio-group-with-legend" type="radio" class="d-radio" value="apple" /></div> <div class="d-radio__copy d-radio__label"> <div class=""><span>Apple</span></div> </div> </div> </label> </div> <div> <label> <div class="d-radio-group"> <div class="d-radio__input"><input name="radio-group-with-legend" type="radio" class="d-radio" value="banana" /></div> <div class="d-radio__copy d-radio__label"> <div class=""><span>Banana</span></div> </div> </div> </label> </div> <div> <label> <div class="d-radio-group"> <div class="d-radio__input"><input name="radio-group-with-legend" type="radio" class="d-radio" value="other" /></div> <div class="d-radio__copy d-radio__label"> <div class=""><span>Other</span></div> </div> </div> </label> </div> </div> </fieldset>
With Options #
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>
Without Legend #
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>
With Slotted Legend #
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>
With Event Hander #
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" @input="onInput" > <dt-radio value="pear">Pear</dt-radio> <dt-radio value="kiwi">Kiwi</dt-radio> </dt-radio-group>
With Validation States #
<div class="d-stack16"> <div> <dt-radio-group name="radio-group-with-success-message" legend="With Success Message" :messages=`[{"message":"Success validation message","type":"success"}]` > <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-error-message" legend="With Error Message" :messages=`[{"message":"Error validation message","type":"error"}]` > <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>
<div class="d-stack16"> <div> <fieldset class="d-input-group__fieldset d-input-group__fieldset"> <legend class="d-label">With Success Message</legend> <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> <div class="base-input__messages d-validation-message__container"> <div role="status" aria-live="polite" class="base-input__message d-validation-message base-input__message--success d-validation-message--success"><p>Success validation message</p></div> </div> </fieldset> </div> <div> <fieldset class="d-input-group__fieldset d-input-group__fieldset"> <legend class="d-label">With Warning Message</legend> <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> <div class="base-input__messages d-validation-message__container"> <div role="status" aria-live="polite" class="base-input__message d-validation-message base-input__message--warning d-validation-message--warning"><p>Warning validation message</p></div> </div> </fieldset> </div> <div> <fieldset class="d-input-group__fieldset d-input-group__fieldset"> <legend class="d-label">With Error Message</legend> <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> <div class="base-input__messages d-validation-message__container"> <div role="status" aria-live="polite" class="base-input__message d-validation-message base-input__message--error d-validation-message--error"><p>Error validation message</p></div> </div> </fieldset> </div> </div>
Vue API #
Slots
Name
|
Description
|
|---|---|
default | slot for Input Group Components |
legend | slot for Input Group Legend |
Props
Name
|
Description
|
Default
|
|---|---|---|
name
required
| The name of the input group Type: string | |
dataQaGroup | A data qa tag for the radio group Type: string | 'radio-group' |
dataQaGroupLegend | A data qa tag for the radio group legend Type: string | 'radio-group-legend' |
dataQaGroupMessages | A data qa tag for the radio group messages Type: string | 'radio-group-messages' |
disabled | Disables the input group Type: booleanValues: truefalse | false |
id | The id of the input group Type: string | function() { return getUniqueString(); } |
legend | The legend of the input group Type: string | '' |
legendChildProps | A set of props that are passed into the legend element Type: object | {} |
legendClass | Used to customize the legend element Type: string|array|object | '' |
messages | Validation messages Type: array | [] |
messagesChildProps | A set of props that are passed into the messages container Type: object | {} |
messagesClass | Used to customize the messages container Type: string|array|object | '' |
showMessages | Show validation messages Type: booleanValues: truefalse | true |
v-model | A provided value for the radio group Type: string|number | '' |
value | The value of the input group Type: string|number|boolean|object | null |
Events
Name
|
Description
|
|---|---|
input | Native input event Type: String | Number |
update:modelValue | Native input event Type: String | Number |
Accessibility #
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.