Overview
Use checkboxes when a user can select multiple items from a list. The user can choose from zero to all items in the list.
Each checkbox works independently from other checkboxes in the list. Checking any one box won't affect the other boxes.
When to use
Checkboxes have a wide variety of uses. You may see checkboxes in forms, filtering, terms and conditions, and lists.
When to avoid
If a user can select only one option from a list, you should use radio buttons. Checkboxes allow the user to select multiple items in a set.
Formatting
Anatomy
The checkbox component includes a checkbox label and a checkbox input. If there is a group of checkboxes, you can add a group label.
- Group label: Provides context for the group. This may include instructions.
- Checkbox input: A checkbox input that the user can interact with. By default, the checkbox input is unselected.
- Checkbox label: Describes the option that the user can select or unselect.
- Helper text (optional): Use helper text to provide extra information or hints for responding. Helper text should appear below the checkbox or checkbox group. This text can also appear as a warning or error message.
Placement
The checkbox component is often used within forms, so their placement may vary. A checkbox can also be used for agreeing to terms and conditions or to filter information.
Content
Group labels
- A set of checkboxes is preceded by a group label to provide context or clarity.
- A group label can either state the category of the grouping or describe what actions to take below.
Checkbox labels
- Labels appear to the right of checkbox inputs.
- Use clear and concise labels for checkboxes.
- If you are tight on space, consider rewording the label. Do not truncate checkbox label text with an ellipsis, instead wrap to a second line.
Behaviors
States
The checkbox input allows for two states: unselected and selected. By default, checkboxes will be unselected.