Looseleaf Framework

Checkboxes: Error 

<fieldset class="field--error">
    <legend>Condiments</legend>

    <div class="field">
        <input type="checkbox" id="condiments-ketchup" name="condiments" value="ketchup" aria-describedby="condiments-error" aria-invalid="true" />
        <label for="condiments-ketchup">Ketchup</label>
    </div>

    <div class="field">
        <input type="checkbox" id="condiments-mustard" name="condiments" value="mustard" aria-describedby="condiments-error" aria-invalid="true" />
        <label for="condiments-mustard">Mustard</label>
    </div>

    <div class="field">
        <input type="checkbox" id="condiments-relish" name="condiments" value="relish" aria-describedby="condiments-error" aria-invalid="true" />
        <label for="condiments-relish">Relish</label>
    </div>

    <p class="field__error" id="condiments-error">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
        </svg>
        You must choose at least one flavour.
    </p>
</fieldset>
 
{% set ariaDescribedby = '' %}
{% if hint %}
    {% set ariaDescribedby = name + '-hint' %}
{% elif error %}
    {% set ariaDescribedby = name + '-error' %}
{% elif hint and error %}
    {% set ariaDescribedby = name + '-hint' + " " + name + '-error' %}
{% endif %}

<fieldset{% if error %} class="field--error"{% endif %}>
    <legend>{{ legend }}</legend>
    {%- if hint %}
    {% render '@hint', { name: name, content: hint } %}
    {%- endif %}
    {%- for value, label in options -%}
    {%- render '@checkbox', {name: name, id: name + '-' + value, value: value, label: label, ariaDescribedby: ariaDescribedby, hint: false, error: false, invalid: error}, true -%}
    {%- endfor -%}
    {%- if error %}
    {% render '@error', { name: name, content: error } %}
    {%- endif -%}
</fieldset>
 
{
  "name": "condiments",
  "legend": "Condiments",
  "hint": false,
  "error": "You must choose at least one flavour.",
  "options": {
    "ketchup": "Ketchup",
    "mustard": "Mustard",
    "relish": "Relish"
  }
}

Checkboxes

A group of checkboxes is wrapped in a fieldset with a legend which names the input group. This technique is derived from WebAIM’s article, Accessible Form Controls.

A hint for the group can be added immediately after the <legend> in a paragraph with a class of field__hint.

A validation error message for the group can be added immediately after the last checkbox in a paragraph with a class of field__error.

Hints and validation error messages must be associated with the checkbox using unique IDs which can be referenced from the checkboxes’ aria-describedby attributes. For more information, see WebAIM’s form validation error documentation.

Checkboxes with an associated error should also be given an aria-invalid attribute of true.