Radio button
The radio button allows users to select only one option from a set of mutually exclusive choices.
States
Default
Empty, waiting for user interaction. The circular outline is visible.
Checked
The user has made a selection. A filled dot appears inside the circle. Only one option in the group can be selected at a time.
Active/Focus
Active state: Occurs during the moment the radio button is being clicked or toggled by the user. Focus state: Indicates that the radio button is currently selected to receive user input.
Disabled
Value is visible but not selectable. If already selected, the option remains visible but cannot be changed.
Error
Appears when the radio button group validation fails, such as when a required selection is left unmade or when the user attempts to proceed without choosing an option.
Behaviour
Radio buttons
- Only one radio button in a group can be active at a time.
- Choosing a new option instantly moves the selection from the old one to the new one.
- A filled dot represents the selected state, while an empty ring represents the unselected state.
Specs
1
Radio button
- The circular button users click or tap to make a selection.
- A filled white dot appears inside when selected
2
Label
- Describes the option the user is selecting.
- Multi-line labels are supported for longer descriptions.
- Recommended max 45 char
3
Helper text
- Optional. Provides additional guidance or contextual information.
- Keep copy short. Read usage guidelines.
- Recommended max 30 char (include spaces).
Dos and Don'ts
- Use radio buttons for 2 to 3 options. For 4 or more options, use a dropdown list instead.
- Organise the radio buttons in a logical order — alphabetically, by most popular, or chronologically (e.g. days of the week).
- Keep label text concise to ensure quick readability, and use consistent text lengths.