See checkbox.config.js for how to toggle ‘invalid’ and ‘required’ checkbox states, including the description text during development.
<div id="{{ checkbox.component_id }}" class="c-checkbox js-checkbox {{#if checkbox.invalid_description_id }}is-invalid{{/if}}">
<input
id="{{ checkbox.input_id }}"
type="checkbox"
name="{{ checkbox.name }}"
value="{{ checkbox.value }}"
aria-describedby="{{ checkbox.general_description_id }}
{{#if checkbox.invalid_description_id }}{{ checkbox.invalid_description_id }}{{/if}}"
{{#if checkbox.required}}class="require-me"{{/if}}>
<label for="{{ checkbox.input_id }}">{{ checkbox.label }}</label>
{{#if checkbox.general_description_id}}
<div id="{{ checkbox.general_description_id }}" class="c-checkbox__general-description">{{ checkbox.general_description }}</div>
{{/if}}
<div id="{{ checkbox.invalid_description_id }}" class="c-checkbox__invalid-description js-invalid-description" {{#unless checkbox.invalid_description_id }}hidden{{/unless}}>{{ checkbox.invalid_description }}</div>
</div>
{
"checkbox": {
"component_id": "id-1",
"input_id": "id-2",
"label": "Checkbox Label",
"type": "text",
"name": "",
"value": "",
"general_description": "Here is a note for this checkbox.",
"general_description_id": "id-3",
"required": true,
"invalid_description": "This checkbox is required.",
"invalid_description_id": "id-4"
}
}
<div id="id-1" class="c-checkbox js-checkbox is-invalid">
<input id="id-2" type="checkbox" name="" value="" aria-describedby="id-3
id-4" class="require-me">
<label for="id-2">Checkbox Label</label>
<div id="id-3" class="c-checkbox__general-description">Here is a note for this checkbox.</div>
<div id="id-4" class="c-checkbox__invalid-description js-invalid-description">This checkbox is required.</div>
</div>