Checkboxes
A small box on a form where a check or other mark is entered as the response to a question.
Checkboxes indicate to users they can select one or more answers or items from a list. They are followed by a label or instructions to explain the significance of checking the box.
Types
Each checkbox has three states which are equivalent to on and offswitches: unselected, selected, and indeterminate.
Checked, unchecked, indeterminate
Guidelines
Anatomy
- Label: Indicates which information you wish to select or unselect.
- Input: Checkbox inputs indicate the appropriate state. It is unchecked by default.
- Field label (optional): Describes what needs to be selected.
Alignment
The labels of the checkboxes are placed next to their inputs. If there is a checkbox grouping, it depends on the use case and UI layout whether they should be arranged vertically or horizontally. The checkbox and radio button groupings should ideally be arranged vertically to make reading them simpler.
Interaction
Checkboxes are toggled on and off by clicking the primary mouse button.
Specifications
This specification should be used by designers and developers when creating checkboxes with pixel-perfect details.
Do
- When choosing one or multiple options from a list.
- Use sentence case, with only proper nouns capitalized
- When comparing between a list of choices is needed.
Don't
- When only one item can be selected.
- Use title caps for the labels.
- Include terminal punctuation at the end of a label.