Checkbox

The checkbox is a component used to allow a user to make multiple choices that are broadly used in forms and surveys. Checkboxes are used to select one or several options in a list, while radio (option) buttons are for selecting one option from many.

Basic example

Structurally, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <input>. We use the sibling selector (~) for all our <input> states, like :checked or :disabled.

Basic checkbox

Basic checkbox checked

Disabled checkbox

Disabled checked checkbox

Inline checkbox

Group checkboxes or radios on the same horizontal row by adding .cd-check-inline.

3(disabled)

Checkbox without labels

Omit the label text from label tag. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).