Looseleaf Framework

Select: Hint 

<div class="field">
    <label for="flavour">Favourite Flavour</label>
    <select id="flavour" name="flavour" aria-describedby="flavour-hint">
        <option value="" selected></option>
        <option value="chocolate">Chocolate</option>
        <option value="vanilla">Vanilla</option>
        <option value="strawberry">Strawberry</option>
    </select>
    <p class="field__hint" id="flavour-hint">Please choose a flavour of ice cream.</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>
    <select id="{{ id if id else name }}" name="{{ name }}" {% if ariaDescribedby != '' %}aria-describedby="{{ ariaDescribedby }}" {% endif %}{% if error %} aria-invalid="true"{% endif %}>
        {%- for value, label in options -%}
        <option value="{{ value }}"{% if default == value %} selected{% endif %}>{{ label }}</option>
        {%- endfor -%}
    </select>
    {%- if hint %}
    {% render '@hint', { name: name, content: hint } %}
    {%- endif %}
    {%- if error %}
    {% render '@error', { name: name, content: error } %}
    {%- endif -%}
</div>
 
{
  "name": "flavour",
  "id": false,
  "label": "Favourite Flavour",
  "hint": "Please choose a flavour of ice cream.",
  "error": false,
  "default": "",
  "options": {
    "": "",
    "chocolate": "Chocolate",
    "vanilla": "Vanilla",
    "strawberry": "Strawberry"
  }
}

Select

Select elements are styled using appearance: none and a custom SVG icon added via a background image. For further customization, see custom properties.

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

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