Checkbox
Examples
Base
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox1">
<label class="chi-checkbox__label" for="checkbox1">Checkbox</label>
</div>
</div>
Disabled
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox2" disabled>
<label class="chi-checkbox__label" for="checkbox2">Checkbox</label>
</div>
</div>
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="checkbox3">
<label class="chi-checkbox__label" for="checkbox3">Checkbox</label>
</div>
</div>
<div class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox4">
<label class="chi-checkbox__label" for="checkbox4">Checkbox</label>
</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="inlineCheckbox1">
<label class="chi-checkbox__label" for="inlineCheckbox1">Option 1</label>
</div>
</div>
<div class="chi-form__item -inline">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="inlineCheckbox2">
<label class="chi-checkbox__label" for="inlineCheckbox2">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="checkbox1">
<label class="chi-checkbox__label" for="checkbox1">Option 1</label>
</div>
</li>
<li class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox2">
<label class="chi-checkbox__label" for="checkbox2">Option 2</label>
</div>
</li>
<li class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox3">
<label class="chi-checkbox__label" for="checkbox3">Option 3</label>
</div>
</li>
<li class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox4">
<label class="chi-checkbox__label" for="checkbox4">Option 4</label>
</div>
</li>
<li class="chi-form__item">
<div class="chi-checkbox">
<input type="checkbox" class="chi-checkbox__input" id="checkbox5">
<label class="chi-checkbox__label" for="checkbox5">Option 5</label>
</div>
</li>
</ul>
</fieldset>