Checkboxes

Checkboxes are inputs used to make single or multiple sections. It can also be used for tasks to display inputs that are complete or incomplete.

Multiple input selection

Checkbox with label

  1. Checkbox: Use checkboxes for the user to be able to select multiple inputs.
  2. Label: Text that indicates what input the user is selecting.

Checkboxes are used in forms to collect input from users. They can be used for a single item, or for a list of items where people can choose any number of options, including zero.

See the Forms page to learn more about how checkboxes can be used in Form patterns.


Task checkboxes

Checkbox task

  1. Checkbox: Use checkboxes for the user to be able to select and complete a task.
  2. Label: Text that indicates what the task is.

A checkbox control has two primary states: selected and unselected. They can be used to complete any tasks assigned to users.


Behavior

Checkboxes require the use of a button within the component to apply the settings once the inputs are selected. When used in a group, each checkbox is independent of all other checkboxes in the list; checking one box doesn't un-check the others.

When using checkboxes in context of tasks. When a user selects an independent input, it will cross out the label and mark the task as completed.