Radio Button

Radio buttons allow users to select a single option from a predefined set of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time.

Note

The general form component guidelines apply to this component. Please make sure you’re familiar with them first.

Anatomy

1. Label: Indicates the purpose of the radio buttons. It should clearly communicate what kind of decision has to be made
2. Description: Provides additional context/instructions
3. Radio button: The radio button selection control.
4. Radio button label: Describes the purpose of the radio buttons. It should clearly communicate what kind of choice is expected.

Usage Guidelines

Use for Small Sets

Radio buttons are best suited for small sets of options (typically 2 to 5). For larger sets of options, consider using a dropdown menu instead to reduce visual clutter.

Use for Mutually Exclusive Choices

Only use radio buttons when the options are mutually exclusive. If multiple selections are possible, consider using checkboxes instead.

✅ Use checkboxes for multiple choices

Notification preferences How would you like to be updated?

Email notifications

SMS notifications

In-app notifications

❌ Don’t Use radio buttons when the choices are not mutually exclusive

Notification preferences How would you like to be updated?

Email notifications

SMS notifications

In-app notifications

Preselected Option

Show code

How often would you like to receive our emails?

Daily

Weekly

Monthly

JSX

<Form>
  <RadioButtonGroup label="How often would you like to receive our emails?">
    <RadioButtonItem
      radioButtonLabel="Daily"
      inputId="radio-button-daily"
      attributes={{ defaultChecked: true }}
    />
    <RadioButtonItem radioButtonLabel="Weekly" inputId="radio-button-weekly" />
    <RadioButtonItem
      radioButtonLabel="Monthly"
      inputId="radio-button-monthly"
    />
  </RadioButtonGroup>
</Form>;

HTML

<form class="o3-form">
  <fieldset
    class="o3-form-field"
    aria-describedby="o3-form-checkbox_18641673100674905"
  >
    <legend class="o3-form-field__legend">
      How often would you like to receive our emails?
      <!-- -->
    </legend>
    <div>
      <input
        name="6m2xh"
        type="radio"
        id="radio-button-daily"
        class="o3-form-input-radio-button o3-visually-hidden"
        required=""
        aria-required="true"
        checked=""
      />
      <label for="radio-button-daily" class="o3-form-input-radio-button__label">
        Daily
      </label>
    </div>
    <div>
      <input
        name="6m2xh"
        type="radio"
        id="radio-button-weekly"
        class="o3-form-input-radio-button o3-visually-hidden"
        required=""
        aria-required="true"
      />
      <label
        for="radio-button-weekly"
        class="o3-form-input-radio-button__label"
      >
        Weekly
      </label>
    </div>
    <div>
      <input
        name="6m2xh"
        type="radio"
        id="radio-button-monthly"
        class="o3-form-input-radio-button o3-visually-hidden"
        required=""
        aria-required="true"
      />
      <label
        for="radio-button-monthly"
        class="o3-form-input-radio-button__label"
      >
        Monthly
      </label>
    </div>
  </fieldset>
</form>

Open in StoryBook

If one of the options is the most common or recommended, pre-select it as the default option. However, ensure it’s easy for the user to change their selection.