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

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
ExperimentalElement offered for testing and feedback. Not intended for use in production.
Documentation
PublishedElement can be used in production

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.

The radio button component contains two parts:

  1. A radio button: the selection control
  2. Label: text describing the option

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

Checkboxes versus radio buttons

Read the Nielsen Norman Group's article on radio buttons.

Feedback