Skip to main content

Checkbox

A checkbox is a form component used to select or deselect item(s) in a list. The list can be a single item with checkbox or multiple items, each with their own checkbox. Checkboxes have three visual states (checked, unchecked, and indeterminate).

Example

Products you own
Different checkbox states on a default theme

Best practices

Use a checkbox to select or deselect item(s) in a list. Use a single checkbox by itself in a toggle scenario (ex. "remember me" in a login scenario). Use within a group for multi-select scenarios, where a user chooses one or more items from a group of choices that are NOT mutually exclusive.

Do

  • Checkboxes can be grouped in collections where checking/unchecking the collection checkbox can facilitate choosing all or none within the collection, while also preserving the ability to check/uncheck sub-choices. When a collection of sub-choices have both checked and unchecked items, the parent checkbox needs to display as indeterminate. The indeterminate functionality is beyond the scope of the framework and is the responsibility of the consuming team.

Don’t

  • Don’t use checkboxes where the choices are mutually exclusive. Instead, use radios.

Related

Radio

Accessibility

  • Valid markup requires checkbox to be used inside a form with a submit button.

Options

A single option exists to display inline (horizontally) by wrapping more than one checkbox with a c-group class on its parent element.

Development

  • Schema definition: The checkbox schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Unselected Checkbox

<div class="c-checkbox">
    <label class="c-label">
        <input aria-label="Control label (unselected)" type="checkbox" id="checkboxId1" name="checkboxId1" value="value1" aria-checked="false">
        <span aria-hidden="true">Control label (unselected)</span>
    </label>
</div>

Selected Checkbox

<div class="c-checkbox">
    <label class="c-label">
        <input aria-label="Control label (selected)" type="checkbox" id="checkboxId2" name="checkboxId2" value="value2" checked="checked" aria-checked="true">
        <span aria-hidden="true">Control label (selected)</span>
    </label>
</div>

Indeterminate Checkbox

<div class="c-checkbox">
    <label class="c-label">
        <input aria-label="Control label (indeterminate)" type="checkbox" id="checkboxId3" name="checkboxId3" value="value3" data-js-checkbox="indeterminate" aria-checked="false">
        <span aria-hidden="true">Control label (indeterminate)</span>
    </label>
</div>

Default Checkbox (disabled)

<div class="c-checkbox">
    <label class="c-label">
        <input aria-label="Control label (disabled)" type="checkbox" id="checkboxId4" name="checkboxId4" value="value4" disabled="disabled" aria-checked="false">
        <span aria-hidden="true">Control label (disabled)</span>
    </label>
</div>

Selected Checkbox (disabled)

<div class="c-checkbox">
    <label class="c-label">
        <input aria-label="Control label (disabled and selected)" type="checkbox" id="checkboxId5" name="checkboxId5" value="value5" checked="checked" disabled="disabled" aria-checked="true">
        <span aria-hidden="true">Control label (disabled and selected)</span>
    </label>
</div>

Indeterminate Checkbox (disabled)

<div class="c-checkbox">
    <label class="c-label">
        <input aria-label="Control label (disabled and indeterminate)" type="checkbox" id="checkboxId6" name="checkboxId6" value="value6" disabled="disabled" data-js-checkbox="indeterminate" aria-checked="false">
        <span aria-hidden="true">Control label (disabled and indeterminate)</span>
    </label>
</div>

Group Checkbox (horizontal)

Inline checkboxes
<fieldset class="c-checkbox f-inline">
    <legend class="c-label">Inline checkboxes</legend>
    <div>
        <div>
            <label class="c-label">
                <input aria-label="Control label 1 (horizontal group)" type="checkbox" id="checkboxId7a" name="checkboxId7a" value="value7a" aria-checked="false">
                <span aria-hidden="true">Control label 1 (horizontal group)</span>
            </label>
            <label class="c-label">
                <input aria-label="Control label 2 (horizontal group)" type="checkbox" id="checkboxId7b" name="checkboxId7b" value="value7b" aria-checked="false">
                <span aria-hidden="true">Control label 2 (horizontal group)</span>
            </label>
            <label class="c-label">
                <input aria-label="Control label 3 (horizontal group)" type="checkbox" id="checkboxId7c" name="checkboxId7c" value="value7c" aria-checked="false">
                <span aria-hidden="true">Control label 3 (horizontal group)</span>
            </label>
        </div>
    </div>
</fieldset>

Group Checkbox (vertical)

Stacked checkboxes
<fieldset class="c-checkbox">
    <legend class="c-label">Stacked checkboxes</legend>
    <div>
        <div>
            <label class="c-label">
                <input aria-label="Control label 1 (vertical group)" type="checkbox" id="checkboxId8a" name="checkboxId8a" value="value8a" aria-checked="false">
                <span aria-hidden="true">Control label 1 (vertical group)</span>
            </label>
            <label class="c-label">
                <input aria-label="Control label 2 (vertical group)" type="checkbox" id="checkboxId8b" name="checkboxId8b" value="value8b" aria-checked="false">
                <span aria-hidden="true">Control label 2 (vertical group)</span>
            </label>
            <label class="c-label">
                <input aria-label="Control label 3 (vertical group)" type="checkbox" id="checkboxId8c" name="checkboxId8c" value="value8c" aria-checked="false">
                <span aria-hidden="true">Control label 3 (vertical group)</span>
            </label>
        </div>
    </div>
</fieldset>