Checkbox
Checkboxes allow users to enable and disable options.
Overview
Checkboxes should be used whenever a yes/no or on/off option is required, or when there are multiple options that can all be selected at the same time.
Usage
Note that CheckboxField expects Checkbox elements as its direct children in order to set the correct error properties.
Content
Copy for individual inputs in 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
Checkboxes have two options for adding hint text.
- Text that appears below the group label should be relevant to the entire group
- Text below the select item should be relevant to that item only.
Accessibility
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 focussing the input which creates a larger touch target.
Errors
- Avoid default HTML form validation
- Avoid validation while typing
- Always validate and show error messages once the form has been submitted
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.
For standalone checkboxes, error messages should appear above the checkbox.
Variations
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.
Theme examples
Smaller checkboxes
Due to the complexity of styling checkbox inputs we have provided an example theme override to reduce the checkbox size.
Note that the paddingTop (used align the text with the checkbox) and the marginTop (used to put space between sibling checkboxes) can take a single value or an array or responsive values - this is useful when aligning text that changes size across breakpoints.
Properties
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 | |
... | JSX.IntrinsicElements["input"] |