Checkbox

Selector

input[type="checkbox"] + label

Checkboxes are used when the user must select any number of available options, including zero. If you have a form with multiple, related checkboxes, surround them with a <fieldset /> tag to visually and semantically group them. When you do this, make sure to also provide a <legend /> as the first child to label them.

Checkboxes shouldn't be used to perform actions (S.C 3.2.2). Instead, combine the checkbox with a form and submit button or use a toggle button.

States

Like other interactive controls, the checkbox squishes slightly when clicked.