Checkbox - Usage
Even though the Checkbox is its own component, we recommend using the Control Field instead because it offers a label, validation message, and in-line messaging.
Basic Guidelines
Copy
-
The list of options should be structured in a logical order, from simplest operation to most complex, or least risk to most.
-
Options should be comprehensive and clearly distinct, using unambiguous vocabulary and context.
-
In-line messaging is optional and used for additional context on the option.
Behaviour
-
The user may be unable to submit the form, if no item has been selected. Error variants are available to indicate a necessary selection. Any required error messages will be displayed in a separate Control Field, which is its own component.
-
Both the Checkbox and the label are used as the clickable area and therefore can’t contain any links. Links need to sit outside the list of Checkboxes as shown below:
Variants Usage
Error Variant
An error will occur if a Checkbox is required to be selected in order to successfully submit the form, but has been left unselected instead. The Control Field component is used to display the error message.
Any Checkbox that requires a selection will change its state accordingly.
Legal Variant
The Checkbox offers a Legal size, with a smaller font size and no in-line messaging. It is used for longer legal text. Legal checkboxes don’t provide a list of options for the user to choose from, but are required to be selected before continuing with the user journey.
Disabled and Read-only – What’s the difference?
Visually the Disabled and Read-only input fields look exactly the same, but their properties in the final product will differ. Here is a quick comparison:
Disabled
Attributes:
- No tab stop
- Not focusable
Use Case:
This is an intermediate state while the form is being submitted, and would only ever be used if that state is shown in the prototype. It is generally not recommended to use this state for designs.
Read-only
Attributes:
- Tab stop
- Focusable
Use Case:
When presenting the selection in a previously submitted form. Users with screen readers can listen to this information.
Alignment
Stacking Checkbox items vertically is recommended, as horizontal items are difficult to scan.
A 16px gap between items ensures that each item has an accessible click area.
Since the text in Legal Checkboxes is most likely longer and might require an additional link, it’s advisable to increase the spacing between individual Checkbox items, to create a clear groupings.
The Checkbox must align with the grid system set out in Foundations. It sits in-line with the rest of the text.
In a 12-column grid layout, the Checkbox sits left-aligned within the six centre columns of the grid, in-line with the rest of the text. The example below is downscaled proportionally for illustration purposes.
