Use the checkboxes component to help users:
Do not use the checkboxes component when you need to help users select one or more options from a long list of options. In this case, use checkboxes dynamic component instead.
Do not use the checkboxes component when users should only be able to select one option and no more. In this case, use the radios component instead.
The checkboxes component is a form element that should always be used in a form. For a description of the usage, the behavior, the layout and validation of form elements, see the form component examples and documentation.
<fieldset class="form-item {{ modifier }}">
<legend>
<span class="legend-title">{{ label }}</span>
{% if label_optional %}
<span class="label-optional">({{ label_optional }})</span>
{% endif %}
</legend>
<div class="form-item">
{% if field_description %}
{% include '@field-message' with {
"field_message": field_description,
"id": id ~ '-description',
"modifier": null
} %}
{% endif %}
<div class="form-columns">
<div class="form-item-column">
{% for option in options %}
{% include '@input' with {
"id": "input-" ~ id ~ "-" ~ modifier ~ "-" ~ option.id,
"type": 'checkbox',
"name": option.name,
"label": option.label,
"modifier": modifier,
"value": option.value,
"attributes": option.attributes
} %}
{% endfor %}
</div>
<div class="form-item-column">
{% if modifier == 'error' %}
{% include '@field-message' with {
"id": id ~ '-validation',
"modifier": "error"
} %}
{% endif %}
{% if modifier == 'success' %}
{% include '@field-message' with {
"id": id ~ '-validation',
"modifier": "success"
} %}
{% endif %}
</div>
</div>
</div>
</fieldset>
<fieldset class="form-item success">
<legend>
<span class="legend-title">input-text</span>
</legend>
<div class="form-item">
<div class="field-message " id="input-checkbox--success-description">
You can add an optional field description here.
<div class="accolade "></div>
</div>
<div class="form-columns">
<div class="form-item-column">
<div class="checkbox">
<input type="checkbox" id="input-input-checkbox--success-success-checkbox-error-1" name="checkboxgroup-error" class="checkbox success" />
<label for="input-input-checkbox--success-success-checkbox-error-1">checkbox option 1</label>
</div>
<div class="checkbox">
<input type="checkbox" id="input-input-checkbox--success-success-checkbox-error-2" checked="checked" name="checkboxgroup-error" class="checkbox success" />
<label for="input-input-checkbox--success-success-checkbox-error-2">checkbox option 2</label>
</div>
</div>
<div class="form-item-column">
<div class="field-message success" role="alert" id="input-checkbox--success-validation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.
<div class="accolade "></div>
</div>
</div>
</div>
</div>
</fieldset>
{
"id": "input-checkbox--success",
"label": "input-text",
"options": [
{
"label": "checkbox option 1",
"name": "checkboxgroup-error",
"id": "checkbox-error-1"
},
{
"label": "checkbox option 2",
"name": "checkboxgroup-error",
"id": "checkbox-error-2",
"attributes": "checked=\"checked\""
}
],
"modifier": "success",
"field_description": "You can add an optional field description here.",
"field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex."
}