1{#
2/**
3 * @file
4 * Theme override for a form element.
5 *
6 * Available variables:
7 * - attributes: HTML attributes for the containing element.
8 * - errors: (optional) Any errors for this form element, may not be set.
9 * - prefix: (optional) The form element prefix, may not be set.
10 * - suffix: (optional) The form element suffix, may not be set.
11 * - required: The required marker, or empty if the associated form element is
12 *   not required.
13 * - type: The type of the element.
14 * - name: The name of the element.
15 * - label: A rendered label element.
16 * - label_display: Label display setting. It can have these values:
17 *   - before: The label is output before the element. This is the default.
18 *     The label includes the #title and the required marker, if #required.
19 *   - after: The label is output after the element. For example, this is used
20 *     for radio and checkbox #type elements. If the #title is empty but the
21 *     field is #required, the label will contain only the required marker.
22 *   - invisible: Labels are critical for screen readers to enable them to
23 *     properly navigate through forms but can be visually distracting. This
24 *     property hides the label for everyone except screen readers.
25 *   - attribute: Set the title attribute on the element to create a tooltip but
26 *     output no label element. This is supported only for checkboxes and radios
27 *     in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
28 *     It is used where a visual label is not needed, such as a table of
29 *     checkboxes where the row and column provide the context. The tooltip will
30 *     include the title and required marker.
31 * - description: (optional) A list of description properties containing:
32 *    - content: A description of the form element, may not be set.
33 *    - attributes: (optional) A list of HTML attributes to apply to the
34 *      description content wrapper. Will only be set when description is set.
35 * - description_display: Description display setting. It can have these values:
36 *   - before: The description is output before the element.
37 *   - after: The description is output after the element. This is the default
38 *     value.
39 *   - invisible: The description is output after the element, hidden visually
40 *     but available to screen readers.
41 * - disabled: True if the element is disabled.
42 * - title_display: Title display setting.
43 *
44 * @see template_preprocess_form_element()
45 */
46#}
47{%
48  set classes = [
49    'js-form-item',
50    'form-item',
51    'js-form-type-' ~ type|clean_class,
52    'form-type-' ~ type|clean_class,
53    'js-form-item-' ~ name|clean_class,
54    'form-item-' ~ name|clean_class,
55    title_display not in ['after', 'before'] ? 'form-no-label',
56    disabled == 'disabled' ? 'form-disabled',
57    errors ? 'form-item--error',
58  ]
59%}
60{%
61  set description_classes = [
62    'description',
63    description_display == 'invisible' ? 'visually-hidden',
64  ]
65%}
66<div{{ attributes.addClass(classes) }}>
67  {% if label_display in ['before', 'invisible'] %}
68    {{ label }}
69  {% endif %}
70  {% if prefix is not empty %}
71    <span class="field-prefix">{{ prefix }}</span>
72  {% endif %}
73  {% if description_display == 'before' and description.content %}
74    <div{{ description.attributes }}>
75      {{ description.content }}
76    </div>
77  {% endif %}
78  {{ children }}
79  {% if suffix is not empty %}
80    <span class="field-suffix">{{ suffix }}</span>
81  {% endif %}
82  {% if label_display == 'after' %}
83    {{ label }}
84  {% endif %}
85  {% if errors %}
86    <div class="form-item--error-message">
87      <strong>{{ errors }}</strong>
88    </div>
89  {% endif %}
90  {% if description_display in ['after', 'invisible'] and description.content %}
91    <div{{ description.attributes.addClass(description_classes) }}>
92      {{ description.content }}
93    </div>
94  {% endif %}
95</div>
96