Radio

<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.

auro-radio use cases

The <auro-radio> element is designed to be a single component for the use of creating an input type="radio" with an associated <label> that meets all use case and accessibility standards.

The following examples illustrate fully functional <auro-radio> elements wrapped with the <auro-radio-group> element. The <auro-radio-group> element is REQUIRED in order to mantain the relationship between individual <auro-radio> elements for functional radio button actions.

Note: The <auro-radio> element is only for to for use as a set of two or more <auro-radio> elements within an <auro-radio-group> element.

Example(s)

Default

This is a default configuration of <auro-radio>.

<auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>

Default Group

This is a default configuration using the <auro-radio-group> and <auro-radio> elements. Notice the use of the slot attribute to set the group title of the <auro-radio-group>.

<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>