fieldset.html.twig 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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 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>