<div class="field">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</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": false
}
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.