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.