@thumbtack/tp-ui-element-checkbox
v3.0.7
Published
Here are a few tips for using checkboxes:
Downloads
5
Keywords
Readme
package: '@thumbtack/tp-ui-element-checkbox' kit: checkbox/index.mdx platform: scss url: /components/checkbox/scss/ mdxType: componentApi
import '@thumbtack/tp-ui-element-checkbox'; import '@thumbtack/tp-ui-layout-form'; import '@thumbtack/tp-ui-layout-block-list'; import '@thumbtack/tp-ui-element-label';
Basic checkboxes
Here are a few tips for using checkboxes:
- The
checked
attribute can be used to check a checkbox by default. - The
label
andinput
are connected through thefor
andid
attributes. Clicking on the label text should toggle the related checkbox.`
<div class="tp-input-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-input-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-input-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-input-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-input-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-input-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-input-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>