Radio Group: Features
Model value
The modelValue
of a lion-radio-group
is string equal to the choiceValue
of the lion-radio
element that has been checked.
Given the dinosaur example above, say that we were to select the last option (diplodocus).
Then the modelValue
of the lion-radio-group
will look as follows:
const groupElement = [parent].querySelector('lion-radio-group');
groupElement.modelValue;
=> "diplodocus";
The name
attribute
The name
attribute of a lion-radio-group
automatically gets assigned to its lion-radio
children. You can also specify names for the lion-radio
elements, but if this name is different from the name assigned to lion-radio-group
, then an exception will be thrown.
Our recommendation would be to set the name
attribute only on the lion-radio-group
and not on the lion-checkbox
elements.
Pre-select
You can pre-select an option by adding the checked attribute to the selected lion-radio
.
Disabled
You can disable a specific lion-radio
option by adding the disabled
attribute.
You can do the same thing for the entire group by setting the disabled
attribute on the lion-radio-group
element.
Help text
You can add help text on each checkbox with help-text
attribute on the <lion-radio>
.
Event
You can listen to the model-value-changed
event whenever the value of the radio group is changed.