- Use to allow users to select multiple options when answering a question.
- Use to allow users to agree or disagree for permissions, for example: terms and conditions, or marketing preferences.
- Do not use the checkbox component if users can only select one option from a selection. In this case, use the Radio component.
Live example
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v1+ |
|
App (@ovotech/element-native) |
v1+ |
How to use it
Writing labels
Checkbox groups need a group label, which should always sit aligned above it. This label allows users to understand what to enter as well as auto-focusing the input, which creates a larger touch target.
Copy for individual inputs in checkbox groups are in semibold for consistency. This is 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’.
Pre-filling inputs
Do not pre-select checkbox options as this makes it more likely that users will:
- not realise they’ve missed a question
- submit the wrong answer
Hint text
There are 2 types of hint texts:
- text that appears below the checkbox list label - this should be relevant to the entire group, for example ‘Select all that apply’
- text below the select item that's relevant to that item only
Error messages
Error messages should appear:
- above the input
- below the label and help text
These should be written in a concise, specific way using plain language. Don't use pleasantries, for example 'please', 'sorry'.
For standalone checkboxes, error messages should appear above the checkbox:
Standalone checkbox
There are times when a group label is not needed – a standalone checkbox for example. In these cases, make sure copy is concise so the checkbox makes sense.
Setting errors
In case you want to notify user about an error (typically this checkbox is required) you can provide error prop with text you want to display
Properties
These are the properties for anyone implementing this component and code.
Checkbox field
|
Name |
Values |
Default |
|---|---|---|
|
label (required) |
String |
|
|
optional |
Boolean |
false |
|
hint |
ReactNode |
|
|
error |
ReactNode |
|
|
checked |
Boolean |
|
|
... |
JSX.IntrinsicElements["div"] |
|
Checkbox
|
Name |
Values |
Default |
|---|---|---|
|
id (required) |
String |
|
|
label (required) |
ReactNode |
|
|
optional |
Boolean |
false |
|
hint |
ReactNode |
|
|
error |
ReactNode |
|
|
'aria-describedby' |
string |
|
|
... |
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 checkbox control.
- As someone using the component, 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 that are related to the checkboxes, as well as how to resolve the error.
- As a keyboard-only user, I want to be able to navigate to each of the checkboxes and activate them using the Space key.
- As someone with a motor disability, I want to be able to easily select the correct checkbox.
- As a screen reader user, I want the group label relating to the checkboxes to be announced when navigating through the checkboxes.
- As a screen reader user, I want any additional information provided alongside the group label to be announced when navigating through the checkboxes.
- As a screen reader user, I want the checkbox'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 checkboxes to be announced when they become present.
- As a voice-control user, I want to be able to select a checkbox using it's associated label.
Test steps
Use these steps to check that the checkbox component has been implemented correctly:
- Turn on a screen reader.
- Navigate to the checkbox(es).
- Verify that each checkbox has a visible label.
- Verify that when navigated to, both the checkbox's label and the group label are announced and that these match those visually present.
- Verify that the checkbox can be activated using the Space key.
- Verify that the checkbox'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 checkbox(es) using the Tab key.
- Verify that once the checkbox receives focus, that there is an announcement to convey that there is an error with this field.
External resources