Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage Guidelines
Radio Button Group Form Field
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
Do
Two options is the minimum number of options required.
Don't
Do not show just one option. In this case, a checkbox should be used.
Do
Radio buttons are appropriate when soliciting Yes/No responses.
Don't
This example involves activation. A toggle therefore should be used in place of radio buttons.
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.
Do
A descriptive label gives content to the selectable options.
Don't
The list loses meaning without a descriptive label.
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.
Do
Do use checkboxes when multiple items can be selected
Don't
Don't use radio buttons 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.
- 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.
Do
Opt to keep radio buttons blank by default to avoid potentially offending customers or mistakenly addressing individuals with incorrect designations.
Don't
Don't select an option by default if it will result in a presumptuous or alienating choice.
Please check the NNgroup article for more information about Radio Button default selection:
🔗Radio Button Default Selection - NN Group Article
Radio Button vs Dropdown
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.
Do
Do use a dropdown if the list is bigger than 6 option items.
Don't
Don't use radio button group if you need to save space or have more 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.
Do
Listing out the options here allows users to compare and contrast the choices easily.
Don't
By tucking the options into a dropdown, users can’t see the entire list of options until the dropdown is expanded.
Related Components & Patterns