Checkbox

Basic Usage

To create a Checkbox, create a label element with the class checkbox and include an input of type checkbox inside it, along with the label text.

Checkbox

<label class="checkbox">
  <input type="checkbox" />
  Checkbox
</label>

Indeterminate

In HTML, a Checkbox can have three states: checked, unchecked, and indeterminate.

An indeterminate Checkbox is neither fully checked nor fully unchecked. For example, a Checkbox representing an item with child items would be indeterminate if some, but not all, of the child items were checked.

HTML doesn't have a built-in way to make an indeterminate Checkbox. Instead, you have to set the indeterminate property (not attribute) of the input element using JavaScript. The example below uses Alpine.js to set the indeterminate state when the input is initialized.

Indeterminate

<label class="checkbox">
  <input
    type="checkbox"
    x-init="$el.indeterminate = true"
  />
  Indeterminate
</label>

Disabled

Checkboxes can be disabled to prevent user interaction. To do so, add the disabled attribute to the input element.

Can't touch this Can't touch this Can't touch this

<label class="checkbox">
  <input type="checkbox" disabled />
  Can't touch this
</label>
<label class="checkbox">
  <input
    type="checkbox"
    disabled
    x-init="$el.indeterminate = true"
  />
  Can't touch this
</label>
<label class="checkbox">
  <input type="checkbox" disabled checked />
  Can't touch this
</label>

Multiple Lines

Below is an example of a Checkbox whose label spans multiple lines.

Main Label

Secondary label used for
additional information

<label class="checkbox">
  <input type="checkbox" />
  <div>
    <strong>Main Label</strong>
    <div>
      Secondary label used for <br />additional information
    </div>
  </div>
</label>

Checkbox Group

When placing multiple Checkboxes next to each other, you should arrange them vertically to avoid confusion. The recommended way to do this is to wrap them in a container element with the class checkbox-group, as this also adds appropriate spacing.

Red Green Blue

<div class="checkbox-group">
  <label class="checkbox">
    <input type="checkbox" />
    Red
  </label>
  <label class="checkbox">
    <input type="checkbox" />
    Green
  </label>
  <label class="checkbox">
    <input type="checkbox" />
    Blue
  </label>
</div>

Composition with Field

Below is an example of how a single Checkbox and a Checkbox Group can be placed inside a Field to allow labeling.

Terms and Conditions

Before you check out, please read our terms and conditions.

I accept the terms and conditions

Which languages do you know?

Select all that apply.

JavaScript TypeScript Python Go

<!-- Single Checkbox inside a Field -->
<div class="field">
  Terms and Conditions
  <div class="help-text">
    Before you check out, please read our
    <a class="link" href="#">terms and conditions</a>.
  </div>
  <label class="checkbox">
    <input type="checkbox" />
    I accept the terms and conditions
  </label>
</div>

<!-- Checkbox Group inside a Field -->
<fieldset class="field">
  <legend>Which languages do you know?</legend>
  <div class="help-text">Select all that apply.</div>
  <div class="checkbox-group">
    <label class="checkbox">
      <input type="checkbox" />
      JavaScript
    </label>
    <label class="checkbox">
      <input type="checkbox" />
      TypeScript
    </label>
    <label class="checkbox">
      <input type="checkbox" />
      Python
    </label>
    <label class="checkbox">
      <input type="checkbox" />
      Go
    </label>
  </div>
</fieldset>