- Do use radio buttons when the user is required to choose a single option from a list of pre-defined values.
- Use radio buttons when there are 7 or fewer options to choose from.
- When the input isn't mandatory.
- When the user should be able to select more than one of the pre-defined values. For this use case, use a Checkbox component
Live example
Availabile platforms
Platform |
Available |
---|---|
Figma |
✓ |
Web (@ovotech/element) |
✓ |
App (@ovotech/element-native) |
✓ |
How to use it
Content guidelines
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.
Properties
RadioField
Name |
Values |
Default |
---|---|---|
name (required) |
String |
|
label (required) |
ReactNode |
|
optional |
Boolean |
false |
hint |
ReactNode |
|
error |
ReactNode |
|
value |
String |
|
onValueChange |
Function |
|
defaultValue |
String |
|
... |
JSX.IntrinsicElements["fieldset"] |
|
Radio
Name |
Values |
Default |
---|---|---|
id (required) |
String |
|
label (required) |
ReactNode |
|
value |
String |
|
hint |
ReactNode |
|
... |
JSX.IntrinsicElements["input"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone using the component, I want to understand the label associated with each radio control.
- As someone with a cognitive disability, I want to be able to understand the information required from me, and the answers I can provide.
- As someone with a cognitive disability, I want to be able to understand any errors related to the radios, as well as how to resolve the error.
- As a keyboard-only user, I want to be able to navigate to each of the radios and then activate them using the Space key.
- As someone with a motor disability, I want to be able to easily select the correct radio.
- As a screen reader user, I want the group label relating to the radios to be announced when navigating through the radios.
- As a screen reader user, I want any additional information provided alongside the group label to be announced when navigating through the radios.
- As a screen reader user, I want the radio's label and its state (whether it is checked or not) to be announced when I navigate to it.
- As a screen reader user, I want any error messages relating to the radios to be announced when they become present.
- As a voice-control user, I want to be able to select a radio using its associated label.
Test steps
Use these steps to check that the Radio component has been implemented correctly:
- Turn on a screen reader.
- Navigate to the radio(s).
- Verify that each radio has a visible label.
- Verify that when navigated to, both the radio's label and the group label are announced and that these match those visually present.
- Verify that the radio can be activated using the Space key.
- Verify that the radio's state is correctly announced by a screen reader.
If any errors appear when the form is validated, complete the following checks:
- Turn on a screen reader.
- Verify that when an error message appears after the form has been submitted, that the error is included in the ErrorSummary component.
- Navigate to the radio(s) using the Tab key.
- Verify that once the radio receives focus, that there is an announcement to convey that there is an error with this field.
Related components
Related patterns
External links