<fieldset class="checkboxes checkboxes--disabled" disabled="disabled">
<legend>Checkboxes</legend>
<ul>
<li>
<label for="input405ope1kllpc7oxl">
<input id="input405ope1kllpc7oxl" name="checkbox" type="checkbox" checked="checked">
Checkbox Item One
</label>
</li>
<li>
<label for="input405ope1kllpc7oxm">
<input id="input405ope1kllpc7oxm" name="checkbox" type="checkbox" >
Checkbox Item Two
</label>
</li>
<li>
<label for="input405ope1kllpc7oxn">
<input id="input405ope1kllpc7oxn" name="checkbox" type="checkbox" >
Checkbox Item Three is remarkably long and will probably wrap on some screens if they are small enough
</label>
</li>
<li>
<label for="input405ope1kllpc7oxo">
<input id="input405ope1kllpc7oxo" name="checkbox" type="checkbox" >
Checkbox Item Four
</label>
</li>
</ul>
</fieldset>
{% if checkboxes is not empty %}
<fieldset class="checkboxes {{ checkboxes.variant }}" {% if checkboxes.required %}aria-required="true"{% endif %} {% if checkboxes.disabled %}disabled="disabled"{% endif %}>
<legend>{{ checkboxes.legend }}</legend>
<ul>
{% for item in checkboxes.items %}
{% set input_id = 'input'|uniqid %}
<li>
<label for="{{ input_id }}">
<input id="{{ input_id }}" name="checkbox" type="checkbox" {% if item.checked %}checked="checked"{% endif %}>
{{ item.label }}
</label>
</li>
{% endfor %}
</ul>
</fieldset>
{% endif %}
{
"checkboxes": {
"legend": "Checkboxes",
"items": [
{
"label": "Checkbox Item One",
"checked": true
},
{
"label": "Checkbox Item Two"
},
{
"label": "Checkbox Item Three is remarkably long and will probably wrap on some screens if they are small enough"
},
{
"label": "Checkbox Item Four"
}
],
"variant": "checkboxes--disabled",
"disabled": true
}
}
fieldset.checkboxes {
@include fieldgroup;
}
These checkboxes can be used in forms to collect data. They are not intended to be used as a standalone pattern. The required, disabled, error, and valid states are provided to be applied to checkboxes by form applications as needed.