Looseleaf Framework

Checkbox: Hint 

<div class="field">
    <input type="checkbox" id="remember" name="remember" aria-describedby="remember-hint" />
    <label for="remember">Remember me</label>
    <p class="field__hint" id="remember-hint">This will keep you logged in for 30 days.</p>
</div>
 
{% if ariaDescribedby === false %}
    {% 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 %}
{% endif %}

<div class="field{% if error %} field--error{% endif %}">
    <input type="checkbox" id="{{ id if id else name }}" name="{{ name }}"{% if value %} value="{{ value }}"{% endif %}{% if ariaDescribedby and ariaDescribedby != '' %} aria-describedby="{{ ariaDescribedby }}"{% endif %}{% if error or invalid %} aria-invalid="true"{% endif %} />
    <label for="{{ id if id else name }}">{{ label }}</label>
    {%- if hint %}
    {% render '@hint', { name: name, content: hint } %}
    {%- endif %}
    {%- if error %}
    {% render '@error', { name: name, content: error } %}
    {%- endif -%}
</div>
 
{
  "name": "remember",
  "id": false,
  "label": "Remember me",
  "ariaDescribedby": false,
  "hint": "This will keep you logged in for 30 days.",
  "error": false,
  "invalid": false
}

Checkbox

Checkboxes are visually hidden and replaced with custom style via pseudo content attached to the adjacent label:

input[type="checkbox"] {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

input[type="checkbox"] + label::before {
    /* Custom checkbox style. */
}

Labels and the corresponding checkbox element are intended to be wrapped in a containing element with a class of field.

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

A validation error message can be added immediately after the <label> or hint 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 checkbox’s aria-describedby attribute. 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.