Home

Radio button

UsageDevelopment

About

A Radio button allows users to select exactly one out of two or more options. A Radio button is always part of a radio button group.

Anatomy

A Radio button consists of a:

  • Border
  • Select indicator
  • Label

Radio button anatomy

When to use Radio buttons

Radio buttons should be used if users need to be able to select one of up to seven options that are similar to each other. The advantage of showing a radio button group is that users see all options in one glance without extra clicks, which allows for easy comparison.

When not to use Radio buttons

  • When users should be able to select 2 or more options. Instead, use a group of Checkboxes.
  • When the options consist of 7 options or more. Instead, use a Select field with Dropdown.

Do use radio buttons if you want users to choose exactly 1 option from up to 7 options

Do use radio buttons if you want users to choose exactly 1 option from up to 7 options.
Do

Do use radio buttons if you want users to choose exactly 1 option from up to 7 options

Do use radio buttons if you want users to choose exactly 1 option from up to 7 options.
Don’t

Behaviour

States

A Radio button comes with the following states:

  • Enabled
  • Hovered
  • Focused
  • Disabled
  • Error

Default

A default selection is preferred, especially when we know the (preferred) choice of the majority of the users.

  • This will reduce interactions and therefore speed up the process.
  • This can guide users to choose an option or several options.
  • If we do this consistently, they know that they can expect default selections for all radio button groups (e.g., in a form).

In other cases, give the control to users and don’t force them into a decision.

Keyboard behaviour

  • Users are able to navigate through the options by the Up- and Down arrow keys.
  • Users are able to select a radio button using the Enter key.

Content

Position Radio buttons below each other, in a vertical matter, for easy comparison.

Do use radio buttons below each other for easy comparison

Do use radio buttons below each other for easy comparison.
Do

Don’t organize radio buttons horizontally, or in any different structure than vertically

Don’t organize radio buttons horizontally, or in any different structure than vertically.
Don’t

Write concise Radio button labels, preferably consisting of one or a few words and written in a consistent manner to promote comparability.

Do use concise and consistent labels for radio buttons

Do use concise and consistent labels for radio buttons.
Do

Don’t use unneccesary long and inconsistent labels for radio buttons

Don’t use unneccesary long and inconsistent labels for radio buttons.
Don’t

When you use multiple radio button groups (e.g.. in forms) you might consider a label for each group.

Use a singular checkbox if users should answer a “Yes/No”, “On/Off”, “True/False”, or “Agree/Disagree” question and will need to confirm their answer.

Do use a checkbox if you want users to agree or disagree with something and agree afterwards

Do use a checkbox if you want users to agree or disagree with something and agree afterwards.
Do

Don’t use a radio button if you want users to agree or disagree with something

Don’t use a radio button if you want users to agree or disagree with something. Radio buttons should always be used in groups.
Don’t

Resources

Events

ComponentEventDescriptionDetails
<r-radio-button />rChangeEmitted when checked state changes via user interaction.
  • element: HTMLRRadioButtonElement
  • value: any
  • checked: boolean
rResetOccurs when a form is reset (resets component’s checked state to initial).