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).
modelValue of the
lion-radio-group will look as follows:
const groupElement = [parent].querySelector('lion-radio-group'); groupElement.modelValue; => "diplodocus";
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
You can pre-select an option by adding the checked attribute to the selected
You can disable a specific
lion-radio option by adding the
You can do the same thing for the entire group by setting the
disabled attribute on the
You can add help text on each checkbox with
help-text attribute on the
You can listen to the
model-value-changed event whenever the value of the radio group is changed.