Checkbox

Checkboxes allow the user to select multiple options from a set.

Markup structure

It's not currently possible to directly style a checkbox in modern browsers, so we use this simple hack. We use a <input type="checkbox"> element to provide the necessary functionality but hide it with CSS. Then we use a <div> to provide the styling. Finally, we wrap everything in a <label> to allow interaction.

<label class="Checkbox">
    <input id="option1" type="checkbox">
    <div></div>
</label>

Checkbox with label

You can add a Label component to toggle the Checkbox component by specifying the relevant checkbox id in the Label's for attribute. Then build a layout by wrapping everything in a Flexbox component—applying spacing with an mr-1 utility class.

<div class="display-flex ai-center">
    <div class="mr-1">
        <label class="Checkbox">
            <input id="option2" type="checkbox">
            <div></div>
        </label>
    </div>
    <div>
        <label class="Label" for="option2">Checkbox label</label>
    </div>
</div>

By handling the layout independently, you're free to build more complex layouts around your checkbox.

This is a small snippet of text to support the label above. 
<div class="display-flex">
    <div class="mr-1">
        <label class="Checkbox">
            <input id="option3" type="checkbox">
            <div></div>
        </label>
    </div>
    <div>
        <div class="mb-1">
            <label class="Label" for="option3">Checkbox label</label>
        </div>
        <small class="Text size1 lh-2 color-gray500">...</small>
    </div>
</div>

Disabled state

If a checkbox is currently disallowed for any reason, you can apply a disabled state using the disabled attribute.

<label class="Checkbox">
    <input id="option4" type="checkbox" disabled>
    <div></div>
</label>

You can also disable an accompanying Label, using the is-disabled class.

<div class="display-flex ai-center">
    <div class="mr-1">
        <label class="Checkbox">
            <input id="option5" type="checkbox">
            <div></div>
        </label>
    </div>
    <div>
        <label class="Label is-disabled" for="option4">Disabled checkbox</label>
    </div>
</div>

Error state

Required validation

<div class="display-flex ai-center">
    <div class="mr-1">
        <label class="Checkbox is-invalid">
            <input id="option10" type="checkbox">
            <div></div>
        </label>
    </div>
    <div>
        <label class="Label is-invalid" for="option10">Error state</label>
    </div>
</div>

Checkbox group

You can group checkboxes together by wrapping them in an additional Flexbox component—again, using margin utility classes to provide spacing. Make sure to apply the same name attribute value to each checkbox in the same group.

<div class="display-flex">
    <div class="mr-2">
        <div class="display-flex ai-center">
            <div class="mr-1">
                <label class="Checkbox">
                    <input id="option1" name="group1" type="checkbox">
                    <div></div>
                </label>
            </div>
            <div>
                <label class="Label" for="option1">Option 1</label>
            </div>
        </div>
    </div>
    <div class="mr-2">
        <div class="display-flex ai-center">
            <div class="mr-1">
                <label class="Checkbox">
                    <input id="option2" name="group1" type="checkbox">
                    <div></div>
                </label>
            </div>
            <div>
                <label class="Label" for="option2">Option 2</label>
            </div>
        </div>
    </div>
</div>

Alternatively, you can stack checkboxes by addding a fd-column utility class to the outer Flexbox component and adjusting the margin utility classes accordingly.

<div class="display-flex fd-column">
    <div class="mb-2">
        <div class="display-flex ai-center">
            <div class="mr-1">
                <label class="Checkbox">
                    <input id="option1" name="group2" type="checkbox">
                    <div></div>
                </label>
            </div>
            <div>
                <label class="Label" for="option1">Option 1</label>
            </div>
        </div>
    </div>
    <div class="mb-2">
        <div class="display-flex ai-center">
            <div class="mr-1">
                <label class="Checkbox">
                    <input id="option2" name="group2" type="checkbox">
                    <div></div>
                </label>
            </div>
            <div>
                <label class="Label" for="option2">Option 2</label>
            </div>
        </div>
    </div>
</div>