form-element

This component is the wrapper for

a label,
an input, a select, a textarea, a checkbox or a radio button,
error messages,
additional information which belongs to this form element.

Since inputs, selects, textareas, checkboxes and radio buttons should never be used without a label, we should always use this component to ensure accessibility.

Information

Folder: src/components/fsk/form/form-element

Files

Schema

Mocks

Template

// src/components/fsk/form/form-element/form-element.html.twig

<div{{ attributes ? attributes|without("class") : "" }} class="FskFormElement{{ errors and errors|length > 0 ? " FskFormElement--error" : "" }} {{ attributes.class }}">
  {% if label and label|length > 0 and label_display in ['before', 'invisible'] %}
    {{ label }}
  {% endif %}
  {% if prefix is not empty %}
    <span class="FskFormElement-prefix">{{ prefix }}</span>
  {% endif %}
  {% if description_display == 'before' and description.content %}
    <div{{ description.attributes }}>
      {{ description.content }}
    </div>
  {% endif %}
  {{ children }}
  {% if suffix is not empty %}
    <span class="FskFormElement-suffix">{{ suffix }}</span>
  {% endif %}
  {% if label and label|length > 0 and label_display == 'after' %}
    {{ label }}
  {% endif %}
  <div class="FskFormElement-errorMessage" role="alert">{% if errors %}{{ errors }}{% endif %}</div>
  {% if description_display in ['after', 'invisible'] and description.content %}
    <div{{ description.attributes ? description.attributes|without("class") : "" }} class="FskFormElement-description {{ description_display == "invisible" ? "u-hiddenVisually" : "" }}">
      {{ description.content }}
    </div>
  {% endif %}
</div>