Checkboxes

Checkboxes should be used when allowing a user to select a combination of different options. The user can also select zero or all of the possible options.

The checkbox control allows for three states: selected, unselected, and indeterminate. The indeterminate state comes into play when the checkbox contains a sublist of selections, some of which are selected, and some unselected.

As the indeterminate checkbox will be rarely used, refer to Mozilla's documentation page on indeterminate checkboxes for more information.

Exceptions

1) If you have to show more than 7 elements, consider adding or replacing the list of checkboxes with a Searchable Dropdown components (to be created).

2) If only one element can be selected at a time and there are fewer than 7 elements, consider using a radio button instead of a checkbox.

    <Form>
      <Form.Check type="checkbox" label="Unchecked" />
      <Form.Check type="checkbox" defaultChecked="true" label="Checked" />
      <Form.Check type="checkbox" label="Disabled" disabled />
      <Form.Check type="checkbox" defaultChecked="true" label="Disabled and Checked" disabled />
      <Form.Check type="checkbox" label="Indeterminate" id="indeterminate" ref={ref => {if (ref) {ref.indeterminate = true}}} />
    </Form>
    

Accessibility

Checkboxes Must Be Keyboard Navigable

Since a checkbox is an interactive control, it must be focusable and keyboard accessible. If the role is applied to a non-focusable element, use the tabindex attribute to change this. The expected keyboard shortcut for activating a checkbox is the Space key.

Make the Label Clickable

In the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated <label> element as well as on the checkbox itself. This is a really useful feature of HTML form labels that makes it easier to click the option you want, especially on small-screen devices like smartphones. Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.