components/forms/_list-field/list-field.html

{# @list-field
#
# parameters:
# type            - string, required, ['text', 'email', 'password', 'date', 'search', 'file']
# id              - string, required
# name            - string, required
# label           - string, required
# note            - string
# field_class     - string
# control_class   - string
# required        - boolean
# disabled        - boolean
# msg             - string
# info            - string
#}
<div class="mzp-c-field{% if field_class %} {{ field_class }}{% endif %}">
  <label class="mzp-c-field-label" for="{{ id }}">{{ label|safe }}{% if note %} <span class="mzp-c-fieldnote">{{ note|safe }}</span>{% endif %}</label>
  <input class="mzp-c-field-control{% if control_class %} {{ control_class }}{% endif %}" list="{{ id }}-options" type="{{ type }}" name="{{ name }}" id="{{ id }}" value="{{ value }}"{% if required %} required aria-required="true"{% endif %}{% if msg %} aria-describedby="{{ id }}-msg"{% endif %}{% if disabled %} disabled aria-disabled="true"{% endif %}>
  {%- if msg -%}<div id="{{ id }}-msg" class="mzp-c-field-msg" role="tooltip">{{ msg|safe }}</div>{%- endif -%}
  {%- if info -%}<p class="mzp-c-field-info">{{ info|safe }}</p>{%- endif -%}
  <datalist id="{{ id }}-options">
    {%- for option in options -%}
    <option value="{{ option.value }}">
    {%- endfor -%}
  </datalist>
</div>