Component Anatomy

The component consists of the following elements:

radio group: a container element (<auro-radio-group>) that manages a collection of radio buttons, handles validation, and provides a shared legend and help text.
radio button: an individual selectable element (<auro-radio>) that can be toggled between selected and unselected states. Only one radio button in a group can be selected at a time.
legend: descriptive label rendered above the group of radio buttons, set via the legend slot on the group.
help text: descriptive text rendered below the group intended to help clarify the intended use of the component and any current validation error with instructions to resolve those errors.

Radio Group

The group element coordinates shared behavior across all child radio buttons, including validation (e.g. required), error state display, and the disabled attribute which disables all options at once.

Radio Button

Each radio button renders a visual indicator (filled circle) and a label. A radio button may be in one of the following states:

checked - The radio button is selected and its value becomes the group's value.
disabled - The radio button is not interactive and cannot be selected.
error - Inherited from the parent group when validation fails.

Default Layout

The auro-radio-group renders radio buttons in a vertical list by default.

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>

Horizontal Layout

Use the horizontal attribute to render options on a single horizontal line.

Note: The horizontal attribute has a limit of 3 options. Beyond three, options will be listed vertically.

Form label goes here

See code

<auro-radio-group horizontal>
  <span slot="legend">Form label goes here</span>
  <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
  <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
  <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
</auro-radio-group>

Colors

Default Color

When the component is used on a light background.

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>

Inverse Color

When the component is used on a darker background, set appearance="inverse" to invert the component colors for proper contrast and visibility.

Form label goes here

See code

<auro-radio-group appearance="inverse">
  <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>