Checkbox

Checkboxes allow users to select one or more items from a list or toggle an option on or off. Changes made with checkboxes do not take effect immediately; the user needs to confirm the selection by performing an additional action, such as clicking a “Submit” button.

Note

The general form component guidelines apply to this component. Please make sure you’re familiar with them first.

Anatomy

1. Label: Indicates the purpose of the entire group of checkboxes. It provides an instruction or context for the available options.
2. Description: Provides additional context/instructions about the checkbox. It helps users understand what is required or gives examples of the kind of information they should enter.
3. Checkbox container: The checkbox selection control.
4. Checkbox label: Indicates the purpose of each individual checkbox(es). It should clearly communicates the choice or option represented by that specific checkbox.

Usage Guidelines

Selection states

Show code

Unchecked

Checked

Indeterminate

JSX

<Form>
  <CheckBoxItem checkboxLabel="Unchecked" inputId="unchecked-checkbox" />
  <CheckBoxItem
    checkboxLabel="Checked"
    inputId="checked-checkbox"
    attributes={{ defaultChecked: true }}
  />
  <CheckBoxItem
    checkboxLabel="Indeterminate"
    inputId="indeterminate-checkbox"
  />
</Form>;

HTML

<form class="o3-form">
  <div class="o3-form-input-checkbox">
    <input
      type="checkbox"
      id="unchecked-checkbox"
      class="o3-form-input-checkbox__input o3-visually-hidden"
      required=""
      aria-required="true"
    />
    <label for="unchecked-checkbox" class="o3-form-input-checkbox__label">
      Unchecked
    </label>
  </div>
  <div class="o3-form-input-checkbox">
    <input
      type="checkbox"
      id="checked-checkbox"
      class="o3-form-input-checkbox__input o3-visually-hidden"
      required=""
      aria-required="true"
      checked=""
    />
    <label for="checked-checkbox" class="o3-form-input-checkbox__label">
      Checked
    </label>
  </div>
  <div class="o3-form-input-checkbox">
    <input
      type="checkbox"
      id="indeterminate-checkbox"
      class="o3-form-input-checkbox__input o3-visually-hidden"
      required=""
      aria-required="true"
    />
    <label for="indeterminate-checkbox" class="o3-form-input-checkbox__label">
      Indeterminate
    </label>
  </div>
</form>

Open in StoryBook

Checkboxes have three selection states: Unchecked, Checked, and Indeterminate. The indeterminate state is typically used to indicate a partially selected group of options or when some but not all sub-options are selected.

Group Related Checkboxes

Show code

Notification preferences How would you like to be updated?

Email notifications

SMS notifications

In-app notifications

JSX

<Form>
  <CheckBoxGroup
    label="Notification preferences"
    description="How would you like to be updated?"
  >
    <CheckBoxItem
      checkboxLabel="Email notifications"
      inputId="email-notification-checkbox"
      attributes={{ defaultChecked: true }}
    />
    <CheckBoxItem
      checkboxLabel="SMS notifications"
      inputId="sms-notification-checkbox"
    />
    <CheckBoxItem
      checkboxLabel="In-app notifications"
      inputId="in-app-notification-checkbox"
    />
  </CheckBoxGroup>
</Form>;

HTML

<form class="o3-form">
  <fieldset
    class="o3-form-field"
    aria-describedby="o3-form-checkbox_5069855534560805"
  >
    <legend class="o3-form-field__legend">
      Notification preferences
      <!-- -->
      <span
        class="o3-form-input__description"
        id="o3-form-checkbox_5069855534560805"
      >
        How would you like to be updated?
      </span>
    </legend>
    <div class="o3-form-input-checkbox">
      <input
        type="checkbox"
        id="email-notification-checkbox"
        class="o3-form-input-checkbox__input o3-visually-hidden"
        required=""
        aria-required="true"
        checked=""
      />
      <label
        for="email-notification-checkbox"
        class="o3-form-input-checkbox__label"
      >
        Email notifications
      </label>
    </div>
    <div class="o3-form-input-checkbox">
      <input
        type="checkbox"
        id="sms-notification-checkbox"
        class="o3-form-input-checkbox__input o3-visually-hidden"
        required=""
        aria-required="true"
      />
      <label
        for="sms-notification-checkbox"
        class="o3-form-input-checkbox__label"
      >
        SMS notifications
      </label>
    </div>
    <div class="o3-form-input-checkbox">
      <input
        type="checkbox"
        id="in-app-notification-checkbox"
        class="o3-form-input-checkbox__input o3-visually-hidden"
        required=""
        aria-required="true"
      />
      <label
        for="in-app-notification-checkbox"
        class="o3-form-input-checkbox__label"
      >
        In-app notifications
      </label>
    </div>
  </fieldset>
</form>

Open in StoryBook

• When possible, group related checkboxes together and provide a clear heading or label to describe the group. This helps users quickly understand what the options are related to.
• Avoid putting more than 7 checkboxes in one group.

Labels

Phrase the labels clearly so that no helper text is needed to clarify what will happen when you select the respective checkbox.

Provide clear and descriptive labels to aid users in understanding the purpose of each checkbox. Avoid using negative statements like ‘check to prevent X’. Instead, use positive, active statements that clearly describe what will happen when the checkbox is selected.

✅ Provide clear and descriptive labels

Subscribe me to the newsletter

❌ Don’t use negative statements

Don’t subscribe me to the newsletter