Components

Checkbox(SCSS)

Boxes for checking and unchecking multiple values in forms.

Version:4.0.1 View sourceChangelogReport 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>
Was this page helpful?

We use this feedback to improve the quality of our documentation.