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 Group

Option 1

Option 2

Option 3

<div>
    <div class="form-check-label-row">
        <label class="form-check-label form-label-sm" for="checkbox-13">
            <input type="checkbox" id="checkbox-13" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Option 1</span>
        </label>
    </div>
    <div class="form-check-label-row">
        <label class="form-check-label form-label-sm" for="checkbox-14"><input type="checkbox" id="checkbox-14" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Option 2</span></label>
    </div>
    <div class="form-check-label-row">
        <label class="form-check-label form-label-sm" for="checkbox-15">
            <input type="checkbox" id="checkbox-15" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Option 3</span>
        </label>
    </div>
</div>

Checkbox Group with Count

Option 1 (08)

Option 2(34)

Option 3(13)

<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-16">
        <input type="checkbox" id="checkbox-16" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Option 1</span><span class="form-check-label__count">(08)</span>
    </label>
</div>
<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-17">
        <input type="checkbox" id="checkbox-17" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Option 2</span><span class="form-check-label__count">(34)</span>
    </label>
</div>
<div class="form-check-label-row">
    <label class="form-check-label form-label-sm" for="checkbox-18">
        <input type="checkbox" id="checkbox-18" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Option 3</span><span class="form-check-label__count">(13)</span>
    </label>
</div>