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