Description

<auro-radio> is a HTML custom element that is rendered as a small circle, which is filled or highlighted when selected. Only one <auro-radio> component in a given <auro-radio-group> can be selected at the same time.

Form label goes here

See code

<auro-radio-group>
  <span slot="legend">Form label goes here</span>
  <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
  <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
  <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
</auro-radio-group>

User Stories

Select an Option

As a user, I want to select a single option from a predefined list so that I can indicate my preference or make a choice.

The options are presented as a group of radio buttons with a descriptive legend.
Only one option can be selected at a time within the group.
Selecting a new option automatically deselects the previously selected option.

Form label goes here

See code

<auro-radio-group>
  <span slot="legend">Form label goes here</span>
  <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
  <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
  <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
</auro-radio-group>

Preset Value

As a user, I want to see a pre-selected option so that I can quickly accept a default or change it if needed.

Form label goes here

Yes

Maybe

See code

<auro-radio-group>
  <span slot="legend">Form label goes here</span>
  <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
  <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
  <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
</auro-radio-group>

Required Selection

As a user, I want to be informed when a selection is required so that I can complete the form correctly.

Form label goes here

See code

<auro-radio-group required setCustomValidityValueMissing="value missing">
  <span slot="legend">Form label goes here</span>
  <auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
  <auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"></auro-radio>
  <auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
</auro-radio-group>