1{#
2/**
3 * @file
4 * Theme override for a fieldset element and its children.
5 *
6 * Available variables:
7 * - attributes: HTML attributes for the fieldset element.
8 * - errors: (optional) Any errors for this fieldset element, may not be set.
9 * - required: Boolean indicating whether the fieldset element is required.
10 * - legend: The legend element containing the following properties:
11 *   - title: Title of the fieldset, intended for use as the text of the legend.
12 *   - attributes: HTML attributes to apply to the legend.
13 * - description: The description element containing the following properties:
14 *   - content: The description content of the fieldset.
15 *   - attributes: HTML attributes to apply to the description container.
16 * - children: The rendered child elements of the fieldset.
17 * - prefix: The content to add before the fieldset children.
18 * - suffix: The content to add after the fieldset children.
19 *
20 * @see template_preprocess_fieldset()
21 */
22#}
23{%
24  set classes = [
25    'js-form-item',
26    'form-item',
27    'js-form-wrapper',
28    'form-wrapper',
29  ]
30%}
31<fieldset{{ attributes.addClass(classes) }}>
32  {%
33    set legend_span_classes = [
34      'fieldset-legend',
35      required ? 'js-form-required',
36      required ? 'form-required',
37    ]
38  %}
39  {#  Always wrap fieldset legends in a <span> for CSS positioning. #}
40  <legend{{ legend.attributes }}>
41    <span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>
42  </legend>
43  <div class="fieldset-wrapper">
44    {% if errors %}
45      <div class="form-item--error-message">
46        <strong>{{ errors }}</strong>
47      </div>
48    {% endif %}
49    {% if prefix %}
50      <span class="field-prefix">{{ prefix }}</span>
51    {% endif %}
52    {{ children }}
53    {% if suffix %}
54      <span class="field-suffix">{{ suffix }}</span>
55    {% endif %}
56    {% if description.content %}
57      <div{{ description.attributes.addClass('description') }}>{{ description.content }}</div>
58    {% endif %}
59  </div>
60</fieldset>
61