Use as a single option within a Radio Group.
In traditional HTML, radio buttons (<input type="radio">) are grouped by a shared name and a specific option is pre-selected using the checked attribute.
q2-radio can still be pre-selected by using the checked attribute, however, with the custom components q2-radio and q2-radio-group, this process uses hierarchy of means by which to pre-select for a certain q2-radio .
As previously stated, to pre-select a q2-radio, you may use the checked attribute and set it to true. However, this functionality is overridden by setting a value to the q2-radio-group. If a value is set to the q2-radio-group, it will always pre-select that corresponding option.
Alternatively, if no value is set to q2-radio-group, the q2-radio-group component will search for any checked q2-radio options and only select the first listed individual q2-radio, and will proceed to uncheck any following q2-radio(s).
The q2-radio element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.
checkedThe state of the radio. This modifies the visual appearance of the element.
disabledDisables the radio and prevents interaction.
hideLabelhide-labelHide's the field's <label> element from view.
Only use when a visible label is impractical.
labelThe text that describes the individual radio option.
readonlyThe radio is non-interactive, but remains focusable.
valueThe value that is returned in the change event that is emitted from the q2-radio-group.
The q2-radio element exposes events that can be used to send and receive data from the component based on user interaction.
Emitted when the radio is checked.
{ value: string; }Emitted when the radio is checked.
{ value: string; }The following CSS variables are available to override the default theme styles of the q2-radio component.