components
Checkbox (design)
A checkbox is an input control for making selections.
Usage
Checkboxes allow the user to select any number of choices, including zero items, one item or multiple items.
- Checkboxes should always be accompanied by a label description
- Use a fieldset to group multiple checkboxes
- In a form, checkboxes should always be placed underneath each other for better scanability
- Checkboxes should be listed in a logical order
Behaviour
When the description label is too long, it wraps to another line.
A checkbox has a minimum target area of 44x44px around its field
Best Practices
Stand-alone checkboxes
Use a stand-alone checkbox for a single option that the user can turn on or off.
Grouping checkboxes
A group of checkboxes should always be accompanied by a fieldset.
Related components
- If a user has to make a single choice, use the radio or choice radio components.
- If the user has to make a single choice where there are more than 4 options, use the select component.