Radio Button

Radio buttons are UI elements that select one option from a list of mutually exclusive options.

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Open in Figma

Repository

A link to the repo where the component lives.

Open link

Usage Guidelines

Radio Button Group Form Field

Use a radio button group when the user needs to select only a single option out of a list

A Minimum of Two Options

There should be at least two mutually exclusive options to select from. If the two options involve any activation, consider using the toggle. If there is only one option to select, consider using the checkbox.

❌ Don't

Do not show just one option. In this case, a checkbox should be used.

✅ Do

Two options is the minimum number of options required.

❌ Don't

This example involves activation. A toggle therefore should be used in place of radio buttons.

✅ Do

Radio buttons are appropriate when soliciting Yes/No responses.

Use Concise Labels

When a list of options is presented, be sure to include a label describing it. This will provide clarity for the user, especially when screen readers are involved.

❌ Don't

The list loses meaning without a descriptive label.

✅ Do

A descriptive label gives content to the selectable options.

Radio Button vs Checkbox

When offering users multiple options for selection, opt for checkboxes over radio buttons. Unlike radio buttons, which limit users to selecting just one option, checkboxes enable users to select multiple items.

❌ Don't

Don't use radio buttons when multiple items can be selected.

✅ Do

Do use checkboxes when multiple items can be selected

Select One Radio Button by Default

Ensuring users can undo their actions is crucial in UI design, as it prevents confusion and frustration. But you cannot click or tap a selected radio button to deselect it.

Exceptions for not using default selection:

- Not knowing what users want or do: In any design scenario, it's essential for us to understand our users' preferences, needs, and typical behaviors.

- Presumptuous or alienating choice: Consider whether you truly need to request the information or if there's an alternative UI control that can effectively gather the required data.

- Safety precaution: Instead of relying on users missing prompts and catching errors afterward, seek a more refined approach to directing users' attention and ensuring active selection of choices.

❌ Don't

Don't select an option by default if it will result in a presumptuous or alienating choice.

✅ Do

Opt to keep radio buttons blank by default to avoid potentially offending customers or mistakenly addressing individuals with incorrect designations.

Please check the NNgroup article for more information about Radio Button default selection:

🔗Radio Button Default Selection - NN Group Article

Although radio buttons and dropdowns can and provide similar functionality, when to use them depends on what needs to be emphasized and/or the number of options available to the user.

Use Radio Buttons When There are Less Than Six Options

This will help reduce the user’s cognitive load and anxiety. If you have more than six items, opt for multi-select dropdown.

❌ Don't

Don't use radio button group if you need to save space or have more than 6 option items

✅ Do

Do use dropdown if the list is bigger than 6 option items.

Use Radio Buttons When You Want to Compare the Options

If your goal is for the user to easily see the options side by side for comparison, having them displayed as radios is more effective than in a dropdown.

❌ Don't

By tucking the options into a dropdown, users can’t see the entire list of options until the dropdown is expanded.

✅ Do

Listing out the options here allow users to compare and contrast the choices easily

Forms

Forms are conjunctions of elements designed for collecting information from the user.

Checkbox

A basic element that can be marked as selected and can be used in a list to provide multiple selection options.

Something looks broken on this site?

Report it to the Design System team here!

Radio Button

Component checklist