< dt-radio-groupmodel-value = " " name = " fruits-radio-group-01" legend = " Fruits" > < dt-radiovalue = " apple" > < span> </ span> </ dt-radio> < dt-radiovalue = " banana" > < span> </ span> </ dt-radio> < dt-radiovalue = " other" > < span> </ span> </ dt-radio> </ dt-radio-group>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Passing in Radio components programmatically using an options object.
< dt-radio-groupv-model = " selectedFruits" name = " fruits-radio-group" legend = " Fruits" > < dt-radiov-for = " option in options" :key = " option.value" :value = " option.value" > < span> </ span> </ dt-radio> </ dt-radio-group>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
When no legend is provided it is expected that an aria-label is passed into the component.
< dt-radio-groupname = " fruits-radio-group" aria-label = " Fruits" > < dt-radiovalue = " pear" > </ dt-radio> < dt-radiovalue = " kiwi" > </ dt-radio> </ dt-radio-group>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
The legend can also be passed by slot.
< dt-radio-groupname = " fruits-radio-group" > < dt-radiovalue = " pear" > </ dt-radio> < dt-radiovalue = " kiwi" > </ dt-radio> < template#legend > </ template> </ dt-radio-group>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
With Event Hander The event handler is only needed if you need to do additional processing. The v-model is automatically updated.
< dt-radio-groupv-model = " selectedFruits" name = " fruits-radio-group" legend = " Fruits" @update: model-value= " onInput" > < dt-radiovalue = " pear" > </ dt-radio> < dt-radiovalue = " kiwi" > </ dt-radio> </ dt-radio-group>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< div> < dt-radio-groupname = " radio-group-with-positive-message" legend = " With Positive Message" :messages = ' [{"message":"Positive validation message","type":"positive"}]' > < dt-radiovalue = " apple" > < span> </ span> </ dt-radio> < dt-radiovalue = " banana" > < span> </ span> </ dt-radio> < dt-radiovalue = " other" > < span> </ span> </ dt-radio> </ dt-radio-group> </ div> < div> < dt-radio-groupname = " radio-group-with-warning-message" legend = " With Warning Message" :messages = ' [{"message":"Warning validation message","type":"warning"}]' > < dt-radiovalue = " apple" > < span> </ span> </ dt-radio> < dt-radiovalue = " banana" > < span> </ span> </ dt-radio> < dt-radiovalue = " other" > < span> </ span> </ dt-radio> </ dt-radio-group> </ div> < div> < dt-radio-groupname = " radio-group-with-critical-message" legend = " With Critical Message" :messages = ' [{"message":"Critical validation message","type":"critical"}]' > < dt-radiovalue = " apple" > < span> </ span> </ dt-radio> < dt-radiovalue = " banana" > < span> </ span> </ dt-radio> < dt-radiovalue = " other" > < span> </ span> </ dt-radio> </ dt-radio-group> </ div>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
import { DtRadioGroup } from '@dialpad/dialtone-vue' ; 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.