Appearance

Light vs. Dark Background

The appearance attribute defines whether the component renders on lighter or darker backgrounds. Supported values are default and inverse. The default value is 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>

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>

Horizontal Layout

Using the horizontal attribute will render the radio options on a 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>

Tokens

The component may be restyled by overriding the following CSS custom properties (design tokens).

@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;

:host {
  // auro-radio-group colors
  --ds-auro-radio-group-label-color: inherit;

  // auro-radio colors
  --ds-auro-radio-btn-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
  --ds-auro-radio-btn-fill-color: transparent;
  --ds-auro-radio-btn-inset-color: transparent;
  --ds-auro-radio-label-color: inherit;
  --ds-auro-radio-tap-color: transparent;
}

Custom themed radio group

See code

<style>
  #customTokenRadioGroup {
    --ds-auro-radio-btn-border-color: purple;
    --ds-auro-radio-btn-fill-color: lavender;
    --ds-auro-radio-btn-inset-color: purple;
    --ds-auro-radio-label-color: purple;
    --ds-auro-radio-group-label-color: purple;
  }
</style>
<auro-radio-group id="customTokenRadioGroup">
  <span slot="legend">Custom themed radio group</span>
  <auro-radio id="customTokenRadio1" label="Option 1" name="customTokenDemo" value="option1"></auro-radio>
  <auro-radio id="customTokenRadio2" label="Option 2" name="customTokenDemo" value="option2" checked></auro-radio>
  <auro-radio id="customTokenRadio3" label="Option 3" name="customTokenDemo" value="option3"></auro-radio>
</auro-radio-group>

CSS Shadow Parts

The following CSS shadow parts are available for styling:

Part	Description
`radio-group`	Apply CSS to the fieldset element in the shadow DOM
`radio`	Apply CSS to the radio button container
`radio-input`	Apply CSS to the radio button input element
`radio-label`	Apply CSS to the radio button label element

CSS Parts example

See code

<style>
  #cssPartsRadioGroup::part(radio-group) {
    border: 2px dashed purple;
    border-radius: 8px;
    padding: 1rem;
  }

  #cssPartsRadioGroup auro-radio::part(radio-label) {
    font-weight: bold;
    color: purple;
  }
</style>
<auro-radio-group id="cssPartsRadioGroup">
  <span slot="legend">CSS Parts example</span>
  <auro-radio id="cssPartsRadio1" label="Option 1" name="cssPartsDemo" value="option1"></auro-radio>
  <auro-radio id="cssPartsRadio2" label="Option 2" name="cssPartsDemo" value="option2"></auro-radio>
  <auro-radio id="cssPartsRadio3" label="Option 3" name="cssPartsDemo" value="option3"></auro-radio>
</auro-radio-group>

Behavior

Disabled Group

Use the disabled attribute on the <auro-radio-group> to disable all radio options within the group.

Form label goes here

See code

<auro-radio-group disabled>
  <span slot="legend">Form label goes here</span>
  <auro-radio id="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
  <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no" checked></auro-radio>
  <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
</auro-radio-group>

Disabled Individual

Use the disabled attribute on individual <auro-radio> elements to disable specific options while leaving the rest of the group interactive.

Choose a meal preference

See code

<auro-radio-group>
  <span slot="legend">Choose a meal preference</span>
  <auro-radio id="disabledIndRadio1" label="Standard" name="mealPref" value="standard"></auro-radio>
  <auro-radio id="disabledIndRadio2" label="Vegetarian" name="mealPref" value="vegetarian"></auro-radio>
  <auro-radio id="disabledIndRadio3" label="Kosher" name="mealPref" value="kosher" disabled></auro-radio>
  <auro-radio id="disabledIndRadio4" label="Halal" name="mealPref" value="halal" disabled></auro-radio>
</auro-radio-group>

Required

When present, the required attribute specifies that an <auro-radio> within the group must be selected. There is no error message associated with the required attribute by default. Use setCustomValidityValueMissing to set a custom error message.

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>

Error

Use the error attribute to apply a persistent custom error on the <auro-radio-group>. Pass a string with the error message.

Form label goes here

See code

<auro-radio-group error="There is an error with this form entry">
  <span slot="legend">Form label goes here</span>
  <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
  <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
  <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
</auro-radio-group>

No Validation

Use the noValidate attribute to disable auto-validation on blur. Validation can still be triggered programmatically via the validate() method.

No auto-validation on blur

See code

<auro-radio-group required noValidate setCustomValidityValueMissing="Please select an option">
  <span slot="legend">No auto-validation on blur</span>
  <auro-radio id="noValidateRadio1" label="Yes" name="noValidateDemo" value="yes"></auro-radio>
  <auro-radio id="noValidateRadio2" label="No" name="noValidateDemo" value="no"></auro-radio>
  <auro-radio id="noValidateRadio3" label="Maybe" name="noValidateDemo" value="maybe"></auro-radio>
</auro-radio-group>