Checkbox

<Checkbox />

<Checkbox />

<input class="stylized-checkbox" type="checkbox" id="myExampleCheckbox" />

Indeterminate

Visually, there can be three states of a checkbox: checked, unchecked, and indeterminate. An indeterminate checkbox means that its state is unclear; typically, this is used when the checkbox has some sub-options under it, and those sub-options are a mix of checked and unchecked, so the parent checkbox can't be said to be "checked" or "unchecked" either.

Indeterminate checkboxes look like this:

<>
  <label htmlFor="checked">
    <Checkbox checked id="checked" />
    Checked
  </label>
  <br />
  <label htmlFor="unchecked">
    <Checkbox id="unchecked" />
    Unchecked
  </label>
  <br />
  <label htmlFor="indeterminate">
    <Checkbox indeterminate id="indeterminate" />
    Indeterminate
  </label>
</>

In React, you can achieve the indeterminate state by passing a value of true to the boolean prop indeterminate.

Note: the indeterminate state is visual only. The actual state of the checkbox is still either checked or unchecked, so the visual "indeterminate" state is a UI visual that masks the real value of the checkbox.

In the vanilla API, there is no declarative syntax for indeterminate checkboxes because HTML, frustratingly, does not provide one. Instead, you will have to use JavaScript to set the checkbox to indetermine. MDN has more details.

Components

Guidelines

Developer Guidelines

• Checkboxes are typically used inside a component, and not on their own.

• Any JavaScript handlers should listen for events on the <input> tag, and not any label or related visual element.

Accessibility Guidelines

• If a checkbox is a required field before the user can submit the page, add the attribute aria-required="true" to the input.

• If not used inside a Selection Set, and if there is more than one checkbox in that group of choices, they should either be inside:

  • a <fieldset>, or

  • an element with the attribute role="group". This wrapper element must have an aria-labelledby attribute whose value is the id of the element that acts as a title for the group — or if the group does not have a visible title, an aria-label attribute whose value is a descriptive title of the group. The value of aria-label must be localized, as some browsers will read it to the user.

Related

SelectionSet

FavoriteCheckbox [deprecated]

CheckboxOptionSet [deprecated]