Checkbox
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
Usage
Description
<div class="c-form mb-0 w-96">
<div class="c-form__label mb-0" for="">Description</div>
<div class="c-form__element">
<div class="c-checkbox">
<input class="c-checkbox__input" type="checkbox" id="checkbox_1" name="checkbox_1" value="value" />
<label class="c-checkbox__label" for="checkbox_1">Option</label>
</div>
<div class="c-checkbox">
<input class="c-checkbox__input" type="checkbox" id="checkbox_2" name="checkbox_2" value="value" checked />
<label class="c-checkbox__label" for="checkbox_2">Checked</label>
</div>
<div class="c-checkbox">
<input class="c-checkbox__input" type="checkbox" id="checkbox_3" name="checkbox_3" value="value" disabled />
<label class="c-checkbox__label" for="checkbox_3">Disabled</label>
</div>
</div>
</div>
Implementation
Type | Name | |
---|---|---|
Elements | ||
Wrapper | .c-checkbox | |
Input | .c-checkbox__input | |
Label | .c-checkbox__label | |
Modifiers | None | |
States | None |