Field

{% set id = id ??? html_id('field') %}
{% set wrap = wrap ?? true %}
{% set controls = controls is not list ? [controls] : controls %}
{% set multiple = controls|length > 1 %}
{% set tag = multiple ? 'fieldset' : 'div' %}
{% set labelPosition = labelPosition ?? 'above' %}
{% set subfieldLabelPosition = subfieldLabelPosition ?? 'above' %}
{% set instructionsPosition = instructionsPosition ?? 'below' %}
{% set descriptionId = 'instructions' | namespaceInputId(id) %}
{% set error = error ?? false %}
{% set errorId = 'error' | namespaceInputId(id) %}
{% set information = information ?? false %}
{% set informationId = informationId ??? ('information' | namespaceInputId(id)) %}

{% set controlIds = controls | map(
  (control, index) => control.configuration.id ?? control.id ?? ("control-#{index}" | namespaceInputId(id))
) %}

{% set describedBy = html_classes({
  (descriptionId): instructions ?? false,
  (errorId): error,
  (informationId): information,
}) %}

{% macro label(text, for = null, hidden = false) %}
  {% set labelTag = for ? 'label' : 'legend' %}

  <{{ labelTag }} {{ html_attributes({
    class: ['field__label', hidden ? 'u-hidden-visually'],
    for: for,
  }) }}>
    {% include '@label' with { text: text } only %}
  </{{ labelTag }}>
{% endmacro %}

{% macro instructions(id, instructions) %}
  <div class="field__instructions" id="{{ id }}">
    {{ instructions | componentize(inline_only=true) }}
  </div>
{% endmacro %}

<{{ tag }} {{ html_attributes({
  id: id,
  class: 'field',
}, attrs ?? {}) }}>
  {% if labelPosition == 'above' or labelPosition == 'hidden' %}
    {{ _self.label(
      text: label,
      for: not multiple ? controlIds | first,
      hidden: labelPosition == 'hidden',
    ) }}
  {% endif %}

  {% if instructions|default and instructionsPosition == 'above-input' %}
    {{ _self.instructions(
      id: descriptionId,
      instructions: instructions,
    ) }}
  {% endif %}

  {% for name, value in hiddenInputs|default %}
    {{ hiddenInput(name, value.value ?? value, value.attrs ?? {}) }}
  {% endfor %}

  <div class="field__controls" data-field-controls-flow="{{ flow ?? 'columns' }}">
    {% for control in controls %}
      <div class="field__control">
        {% set controlId = controlIds[loop.index0] %}

        {% if control.label|default and (subfieldLabelPosition == 'above' or subfieldLabelPosition == 'hidden') %}
          <div class="field__control-label{{ subfieldLabelPosition == 'hidden' ? ' u-hidden-visually' }}" for="{{ controlId }}">
            {% include '@label' with { text: control.label } only %}
          </div>
        {% endif %}

        <div class="field__control-inner">
          {% if control.component|default %}
            {% include control.component with control.configuration | merge({
              id: controlId,
              describedBy: describedBy,
              invalid: error,
            }) only %}
          {% elseif control.html|default %}
            {{ control.html }}
          {% endif %}
        </div>

        {% if control.label|default and (subfieldLabelPosition == 'below') %}
          <div class="field__control-label" for="{{ controlId }}">
            {% include '@label' with { text: control.label } only %}
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>

  {% if labelPosition == 'below' %}
    {{ _self.label(
      text: label,
      for: not multiple ? controlIds | first,
    ) }}
  {% endif %}

  {% if error %}
    <div class="field__error" id="{{ errorId }}">
      {% include '@notice' with {
        type: 'error',
        text: error,
      } only %}
    </div>
  {% endif %}

  {% if information or informationAttrs|default %}
    <div {{ html_attributes({ class: 'field__information', id: informationId }, informationAttrs ?? {}) }}>
      {% include '@notice' with {
        type: 'info',
        text: information,
      } only %}
    </div>
  {% endif %}

  {% if instructions|default and instructionsPosition == 'below' %}
    {{ _self.instructions(
      id: descriptionId,
      instructions: instructions,
    ) }}
  {% endif %}
</{{ tag }}>