<div class="form-block form-block--checkboxes form-block--checkbox-example">
<fieldset>
<legend>Checkboxes</legend>
<div class="form-group">
<div class="form-input form-input--checkbox">
<input id="checkbox-example-1" value="Option 1" name="checkbox-example" type="checkbox">
<label for="checkbox-example-1">
<span>Option 1</span>
</label>
<p>Lorem ipsum dolor sit amet, sit ex iusto pertinax interpretaris, zril fastidii ut qui, aeque appetere maluisset</p>
</div>
<div class="form-input form-input--checkbox">
<input id="checkbox-example-2" value="Option 2" name="checkbox-example" type="checkbox" checked>
<label for="checkbox-example-2">
<span>Option 2</span>
</label>
<p>Lorem ipsum dolor sit amet, sit ex iusto pertinax interpretaris, zril fastidii ut qui, aeque appetere maluisset</p>
</div>
<div class="form-input form-input--checkbox">
<input id="checkbox-example-3" value="Option 3" name="checkbox-example" type="checkbox">
<label for="checkbox-example-3">
<span>Option 3</span>
</label>
</div>
<div class="form-input form-input--checkbox">
<input id="checkbox-example-4" value="Option 4" name="checkbox-example" type="checkbox">
<label for="checkbox-example-4">
<span>Option 4</span>
</label>
<p>Lorem ipsum dolor sit amet, sit ex iusto pertinax interpretaris, zril fastidii ut qui, aeque appetere maluisset</p>
</div>
</div>
</fieldset>
</div>
<div class="form-block form-block--checkboxes form-block--{{ formBlockName }}{% if formBlockValidationMessage %} has-error{% endif %}">
<fieldset>
<legend>{{ formBlockLegend }}</legend>
<div class="form-group">
{% for option in formBlockOptions %}
<div class="form-input form-input--checkbox">
<input id="{{ formBlockName }}-{{ loop.index }}" value="{{ option.value }}" name="{{ formBlockName }}" type="checkbox"{{ option.checked ? ' checked' : '' }}>
<label for="{{ formBlockName }}-{{ loop.index }}">
{% if option.icon %}
{% include '@icon' with { source: option.icon } %}
{% endif %}
<span>{{ option.label }}</span>
</label>
{% if option.description %}<p>{{ option.description }}</p>{% endif %}
</div>
{% endfor %}
</div>
{% if formBlockValidationMessage %}
<div class="form-block-validation-message">
<p>{{ formBlockValidationMessage }}</p>
</div>
{% endif %}
</fieldset>
</div>
{
"formBlockLegend": "Checkboxes",
"formBlockName": "checkbox-example",
"formBlockOptions": [
{
"value": "Option 1",
"label": "Option 1",
"description": "Lorem ipsum dolor sit amet, sit ex iusto pertinax interpretaris, zril fastidii ut qui, aeque appetere maluisset"
},
{
"value": "Option 2",
"label": "Option 2",
"description": "Lorem ipsum dolor sit amet, sit ex iusto pertinax interpretaris, zril fastidii ut qui, aeque appetere maluisset",
"checked": true
},
{
"value": "Option 3",
"label": "Option 3"
},
{
"value": "Option 4",
"label": "Option 4",
"description": "Lorem ipsum dolor sit amet, sit ex iusto pertinax interpretaris, zril fastidii ut qui, aeque appetere maluisset"
}
]
}
Purpose: Used to allow the user to input information.