Radio button
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
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.
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.
Write concise Radio button labels, preferably consisting of one or a few words and written in a consistent manner to promote comparability.
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.
Resources
Events
Component | Event | Description | Details |
---|---|---|---|
<r-radio-button /> | rChange | Emitted when checked state changes via user interaction. |
|
rReset | Occurs when a form is reset (resets component’s checked state to initial). |