Skip to content

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.

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?
❌ Don’t Use radio buttons when the choices are not mutually exclusive
Notification preferences How would you like to be updated?

Preselected Option

How often would you like to receive our emails?
<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>;
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.