A checkbox is a UI element that allows users to select one or more options from a list. It is commonly used in forms, settings, and filters.

Checkbox without label

<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-1"><input type="checkbox" id="checkbox-1" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text"></span></label>
</div>
<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-2"><input type="checkbox" id="checkbox-2" class="form-check-input" aria-label="Checkbox" checked /><span class="form-check-label__text"></span></label>
</div>
<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-3"><input type="checkbox" id="checkbox-3" class="form-check-input" aria-label="Checkbox" disabled="" /><span class="form-check-label__text"></span></label>
</div>
<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-4"><input type="checkbox" id="checkbox-4" class="form-check-input" aria-label="Checkbox" checked disabled="" /><span class="form-check-label__text"></span></label>
</div>

Checkbox with label

Checkboxes can utilize the Indeterminate class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Default With Label

Active With Label

Disabled With Label

Active Disabled With Label

<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-5"><input type="checkbox" id="checkbox-5" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Default With Label</span></label>
</div>
<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-6"><input type="checkbox" id="checkbox-6" class="form-check-input" aria-label="Checkbox" checked /><span class="form-check-label__text">Active With Label</span></label>
</div>
<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-7"> <input type="checkbox" id="checkbox-7" class="form-check-input" aria-label="Checkbox" disabled="" /><span class="form-check-label__text">Disabled With Label</span> </label>
</div>
<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-8">
        <input type="checkbox" id="checkbox-8" class="form-check-input" aria-label="Checkbox" disabled="" checked /><span class="form-check-label__text">Active Disabled With Label</span>
    </label>
</div>