Checkbox
Checkboxes allow the user to select an option or multiple, from a set of options.
Breakdown
A checkbox is used for multiple choice selection. They are independent of each other in a list, and therefore, different from a radio button. One selection does not affect other checkboxes in the same list.
Usage
Checkbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting.
- Use when it is possible to select one or more options from a list.
- Use for single select options like accepting ‘terms and conditions’ and other similar functionality.
- List options in a logical order, like small to large, or simple to complex.
- Do not use punctuation like semi-colons or full stops at the end of labels.
- Save the choice the user made upon submission of the form.
Single
Use a single checkbox when the user is forced to make a choice to continue.
Group
Use a checkbox group when someone can select more than one option from a list of options. Limit options to no more than five. If you have more than five, consider splitting them into separate question groups to make them easier to identify for the user.
Alignment
Use vertical alignment of multi-line labels so that the first line is vertically centered with the checkbox input.
Anatomy
Box
The input box is 27px, the same as a medium icon.
Vertical gap
Checkbox fields have a vertical gap of 9px between the input box and text counterpart.
Accessibility
Checkboxes should have labels that can be read by screen readers, and that can be clicked or tapped to make easily by the user to select and deselect options. Therefore, make sure to supply the label prop.
