components icon

Radio Button

Radio buttons require users to make one selection from a group of options. Because the user can select only one option, radio buttons are used to present mutually-exclusive choices.

Status

Documentation
PublishedElement can be used in production
PublishedElement can be used in production
PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
Web Components
In backlogElement is in backlog
React
React
ExperimentalElement offered for testing and feedback. Not intended for use in production.
Angular
Angular
In progressElement design and development in progress

What's new

Radio buttons now incorporate new sizes, new colors, and a simplified focus state for readability and accessibility. The focus state was also extended to include the label tag, allowing users to select the radio button or its associated label.

When to use

Checkboxes and radio buttons are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or for those using assistive technology.

ComponentUse cases
Radio buttonIf the question presents a binary option, or if the user must select only one option from a list of five or fewer, use radio buttons instead of checkboxes.
CheckboxIf a user can select multiple options, use checkboxes. Checking one box does not uncheck others in the same list. A checkbox can also be used to confirm acceptance, as it allows a user to select and unselect the box before submission.

Anatomy

A radio button is represented by a circle. When it is selected, the selection is indicated by a smaller circle embedded within a larger circle along with a color change. The group label, sometimes called a legend or fieldset in code, gives the user context to make a selection. The individual selections have labels describing the user’s options.

A diagram showing the anatomy of the radio button component.

The radio button component contains two parts:

  1. A radio button: the selection control.
  2. Label: text describing the option.
A diagram showing the anatomy of the radio button group.

A radio button group can have up to four parts:

  1. Group label: description of the group
  2. Radio button: selectable option.
  3. Label: identifies option.
  4. Error message: validation error information.

Articles

Radio Buttons in UX Design

UX Planet guide to Radio buttons

Checkboxes versus Radio Buttons

Read the Nielsen Norman Group's guidance

Feedback