Use checkboxes allow users to switch items on or off.
Use checkboxes to allow users to select one or multiple items from a list
Usage
Use to allow users to agree or disagree for permissions, for example: terms and conditions, or marketing preferences.
Consider "Select All" when needed – If there are many options, provide a "Select All" checkbox to improve usability.
Do not use the checkbox component if users can only select one option from a selection. In this case, use a radio.
Use default states thoughtfully – Default to unchecked unless there’s a strong reason (e.g. preserving previous user choices).
Writing a checkbox
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
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related
External links