Form
Checkboxes
This component is the component for a form field with multiple checkboxes. If used as a standalone checkbox, see checkbox component.
Elements
This component is composed of two elements:
checkboxesthe wrapper- its child
checkboxelements
- its child
You can wrap it inside an input component (see input components) when used as a form field. The checkboxes class is associated with input__control.
inputthe wrapperinput__labelfield labelinput__noticeoptional notice (which can also be used to display error messages)input__control checkboxesthe component
<div class="input">
<legend class="input__label">Label</legend>
<div class="input__control checkboxes">
<div class="checkbox">
<input type="checkbox" id="checkbox_1" value="checkbox_1" class="checkbox__control" checked />
<label for="checkbox_1" class="checkbox__label">Checkbox 1</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox_2" value="checkbox_2" class="checkbox__control" />
<label for="checkbox_2" class="checkbox__label">Checkbox 2</label>
</div>
</div>
</div>Properties
Add classes to the wrapper class to change the style of the component.
Direction
Change the direction of the component.
class="checkboxes"
Default
class="checkboxes checkboxes--portrait"
Disabled
When used as a form field, you can add the input--disabled to the wrapper like you would for an input component to disable the whole field.
class="input select input--disabled"
Required
When used as a form field, you can add the input--required to the wrapper like you would for an input component.
class="input select input--required"