Looseleaf Framework

Input: Error 

<div class="field field--error">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" aria-describedby="name-error" aria-invalid="true" />
    <p class="field__error" id="name-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 enter your name.
    </p>
</div>
 
{% 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 %}

<div class="field{% if error %} field--error{% endif %}">
    <label for="{{ name }}">{{ label }}</label>
    <input type="{{ type }}" id="{{ id if id else name }}" name="{{ name }}" {% if ariaDescribedby != '' %}aria-describedby="{{ ariaDescribedby }}" {% endif %}{% if error %} aria-invalid="true"{% endif %} />
    {%- if hint %}
    {% render '@hint', { name: name, content: hint } %}
    {%- endif %}
    {%- if error %}
    {% render '@error', { name: name, content: error } %}
    {%- endif -%}
</div>
 
{
  "name": "name",
  "id": false,
  "type": "text",
  "label": "Name",
  "hint": false,
  "error": "You must enter your name."
}

Input

Input styles are suitable for any generic <input> (with type attributes of text, email, password, et cetera).

Labels and the corresponding input are 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 input using unique IDs which can be referenced from the input’s aria-describedby attribute. For more information, see WebAIM’s form validation error documentation.

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