Components

Checkbox(SCSS)

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.`

Morning

Afternoon

Evening

<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.

Morning

Afternoon

Evening

<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.

I accept the Terms of Service

<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>