Checkbox
Examples
Base
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-ba1">
<label class="chi-checkbox__label" for="checkbox-ba1">Checkbox</label>
</div>
</div>
Checked
Use the checked
boolean attribute to set the default value of
a checkbox to true.
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-ch1" checked>
<label class="chi-checkbox__label" for="checkbox-ch1">Checkbox</label>
</div>
</div>
Disabled
Use the disabled
boolean attribute to prevent users from interacting with an input.
Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus.
Note: The required attribute can not be used on inputs with a disabled attribute specified.
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-di1" disabled>
<label class="chi-checkbox__label" for="checkbox-di1">Checkbox</label>
</div>
</div>
Required
Use the required
boolean attribute to indicate which checkboxes must be completed before submitting a form.
This is useful for ensuring users accept a Terms of Service, Privacy Policy, or other legal requirement.
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-re1" required>
<label class="chi-checkbox__label" for="checkbox-re1">
I accept the Terms of Service
<abbr class="chi-label__required" title="Required field">*</abbr>
</label>
</div>
</div>
Help
Use chi-label__help
to include a help icon that displays helpful information about an input in a popover.
A help icon must be contained within an icon button to ensure it receives focus when a user tabs through a form.
Helpful information goes here.
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-he1">
<label class="chi-checkbox__label" for="checkbox-he1">Checkbox</label>
<div class="chi-label__help">
<button class="chi-button -icon -xs -flat" id="example__help-button" aria-label="Help" data-target="#example__help-popover">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</button>
<section class="chi-popover chi-popover--top -animated" id="example__help-popover" aria-modal="true" role="dialog" aria-hidden="true" x-placement="top">
<div class="chi-popover__content">
<p class="chi-popover__text">Helpful information goes here.</p>
</div>
</section>
</div>
</div>
</div>
<script>chi.popover(document.getElementById('example__help-button'));</script>
Message
Add a message below a checkbox to store descriptions, validation feedback, and other helpful information.
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-me1">
<label class="chi-checkbox__label" for="checkbox-me1">Checkbox</label>
</div>
<div class="chi-label -status">Optional input message</div>
</div>
Error
Use the -danger
state to provide feedback to users when an input fails to validate.
To meet accessibility requirements, danger inputs must include an error message explaining the
failure and/or how to correct it.
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-er1">
<label class="chi-checkbox__label -danger" for="checkbox-er1">
I accept the Terms of Service
<abbr class="chi-label__required" title="Required field">*</abbr>
</label>
</div>
<div class="chi-label -status -danger">Please accept the terms of service.</div>
</div>
Layout Variations
Stacked
Group checkboxes in chi-form__item
for easy stacking.
<fieldset>
<legend class="chi-label">Select options</legend>
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-st1">
<label class="chi-checkbox__label" for="checkbox-st1">Option 1</label>
</div>
</div>
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-st2">
<label class="chi-checkbox__label" for="checkbox-st2">Option 2</label>
</div>
</div>
</fieldset>
Grid
Use chi-grid
to render a group of checkboxes in a responsive grid.
In the example below, the checkboxes display in 4 columns on medium screens and up,
2 columns on small screens, and 1 column on x-small screens.
<fieldset>
<div class="chi-grid">
<div class="chi-col -w--12 -mb--1">
<legend class="chi-label">Select options</legend>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g1">
<label class="chi-checkbox__label" for="checkbox-g1">Option 1</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g2">
<label class="chi-checkbox__label" for="checkbox-g2">Option 2</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g3">
<label class="chi-checkbox__label" for="checkbox-g3">Option 3</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g4">
<label class="chi-checkbox__label" for="checkbox-g4">Option 4</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g5">
<label class="chi-checkbox__label" for="checkbox-g5">Option 5</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g6">
<label class="chi-checkbox__label" for="checkbox-g6">Option 6</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g7">
<label class="chi-checkbox__label" for="checkbox-g7">Option 7</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g8">
<label class="chi-checkbox__label" for="checkbox-g8">Option 8</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g9">
<label class="chi-checkbox__label" for="checkbox-g9">Option 9</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g10">
<label class="chi-checkbox__label" for="checkbox-g10">Option 10</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g11">
<label class="chi-checkbox__label" for="checkbox-g11">Option 11</label>
</div>
</div>
</div>
<div class="chi-col -w--12 -w-md--3 -w-sm--6 -mb--1">
<div class="chi-form__item">
<div class="chi-checkbox">
<input class="chi-checkbox__input" type="checkbox" id="checkbox-g12">
<label class="chi-checkbox__label" for="checkbox-g12">Option 12</label>
</div>
</div>
</div>
</div>
</fieldset>
Inline
Apply the class -inline
to chi-form__item
to display two or more checkboxes in one row.
<fieldset>
<legend class="chi-label">Select options</legend>
<div class="chi-form__item -inline">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-in1">
<label class="chi-checkbox__label" for="checkbox-in1">Option 1</label>
</div>
</div>
<div class="chi-form__item -inline">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-in2">
<label class="chi-checkbox__label" for="checkbox-in2">Option 2</label>
</div>
</div>
</fieldset>
Checkbox List
Checkbox lists are used to wrap a series of checkboxes in a list.
To render a series of checkboxes in a list, apply the class -list
to chi-form__item
.
<fieldset>
<legend class="chi-label">Select options</legend>
<ul class="chi-form__item -list">
<li class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-li1">
<label class="chi-checkbox__label" for="checkbox-li1">Option 1</label>
</div>
</li>
<li class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-li2">
<label class="chi-checkbox__label" for="checkbox-li2">Option 2</label>
</div>
</li>
<li class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-li3">
<label class="chi-checkbox__label" for="checkbox-li3">Option 3</label>
</div>
</li>
<li class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-li4">
<label class="chi-checkbox__label" for="checkbox-li4">Option 4</label>
</div>
</li>
<li class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox-li5">
<label class="chi-checkbox__label" for="checkbox-li5">Option 5</label>
</div>
</li>
</ul>
</fieldset>