Use radio buttons allow users to select one of a list of options
Only one radio button in a list can be selected at a time
Usage
Use radio buttons when the user is required to choose a single option from a list of pre-defined values.
If there are 8 or more options, consider using a Select field instead of a radio to avoid overwhelming the user.
Don’t leave all options unselected – Unlike checkboxes, one option should always be pre-selected.
Don’t use radios when the user should be able to select multiple options in the list.
Writing radio buttons
Copy for individual inputs in radios and checkbox groups are in semibold for consistency, because they sit in a hierarchy below the group labels.
Only ask for information that is definitely needed, don’t mark fields as ‘required’, instead use ‘optional’.
Hint text
There are two types of hint texts:
- Text that appears below the Radio list label. It should be relevant to the entire group.
- Text below the select item. It should be relevant to that item only.
Error
Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related
External links
- Link URL