Thumbprint logo

Components

Checkbox

Boxes for checking and unchecking multiple values in forms.

Version:4.0.3 •View source•Changelog•Report issue
Install:yarn add @thumbtack/thumbprint-scss

Basic checkboxes

Here are a few tips for using checkboxes:

  • The checked attribute can be used to check a checkbox by default.
  • The label and input are connected through the for and id attributes. Clicking on the label text should toggle the related checkbox.`
<div class="tp-checkbox-wrap">
    <input
        class="tp-checkbox-input"
        name="example-basic"
        id="example-basic-a"
        type="checkbox"
        checked
    />
    <div class="tp-checkbox-image"></div>
    <label class="tp-label" for="example-basic-a">Morning</label>
</div>
<div class="tp-checkbox-wrap">
    <input class="tp-checkbox-input" name="example-basic" id="example-basic-b" type="checkbox" />
    <div class="tp-checkbox-image"></div>
    <label class="tp-label" for="example-basic-b">Afternoon</label>
</div>
<div class="tp-checkbox-wrap">
    <input class="tp-checkbox-input" name="example-basic" id="example-basic-c" type="checkbox" />
    <div class="tp-checkbox-image"></div>
    <label class="tp-label" for="example-basic-c">Evening</label>
</div>

Disabled checkboxes

Add the disabled attribute to the input element to make it visually and functionally disabled.

You should also use tp-label--disabled to visually disable the label.

<div class="tp-checkbox-wrap">
    <input
        disabled
        class="tp-checkbox-input"
        name="example-disabled"
        id="example-disabled-a"
        type="checkbox"
        checked
    />
    <div class="tp-checkbox-image"></div>
    <label class="tp-label tp-label--disabled" for="example-disabled-a">Morning</label>
</div>
<div class="tp-checkbox-wrap">
    <input
        disabled
        class="tp-checkbox-input"
        name="example-disabled"
        id="example-disabled-b"
        type="checkbox"
    />
    <div class="tp-checkbox-image"></div>
    <label class="tp-label tp-label--disabled" for="example-disabled-b">Afternoon</label>
</div>
<div class="tp-checkbox-wrap">
    <input
        disabled
        class="tp-checkbox-input"
        name="example-disabled"
        id="example-disabled-c"
        type="checkbox"
    />
    <div class="tp-checkbox-image"></div>
    <label class="tp-label tp-label--disabled" for="example-disabled-c">Evening</label>
</div>

Checkbox with an error

The tp-checkbox-input--bad-news class can be used to visually represent an error.

This class only changes the checkbox’s color. It should be used alongside an error message that helps users advance through the form.

<div class="tp-checkbox-wrap">
    <input
        class="tp-checkbox-input tp-checkbox-input--bad-news"
        name="example-error"
        id="example-error-a"
        type="checkbox"
    />
    <div class="tp-checkbox-image"></div>
    <label class="tp-label tp-label--bad-news" for="example-error-a">
        I accept the Terms of Service
    </label>
</div>