You are here

fieldset.html.twig in Drupal 10

Theme override for a fieldset element and its children.

Available variables:

  • attributes: HTML attributes for the fieldset element.
  • errors: (optional) Any errors for this fieldset element, may not be set.
  • required: Boolean indicating whether the fieldset element is required.
  • legend: The legend element containing the following properties:
    • title: Title of the fieldset, intended for use as the text of the legend.
    • attributes: HTML attributes to apply to the legend.
  • description: The description element containing the following properties:
    • content: The description content of the fieldset.
    • attributes: HTML attributes to apply to the description container.
  • description_display: Description display setting. It can have these values:
    • before: The description is output before the element.
    • after: The description is output after the element (default).
    • invisible: The description is output after the element, hidden visually but available to screen readers.
  • children: The rendered child elements of the fieldset.
  • prefix: The content to add before the fieldset children.
  • suffix: The content to add after the fieldset children.

File

core/themes/claro/templates/fieldset.html.twig
View source
  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. * - description_display: Description display setting. It can have these values:
  17. * - before: The description is output before the element.
  18. * - after: The description is output after the element (default).
  19. * - invisible: The description is output after the element, hidden visually
  20. * but available to screen readers.
  21. * - children: The rendered child elements of the fieldset.
  22. * - prefix: The content to add before the fieldset children.
  23. * - suffix: The content to add after the fieldset children.
  24. *
  25. * @see template_preprocess_fieldset()
  26. * @see claro_preprocess_fieldset()
  27. */
  28. #}
  29. {%
  30. set classes = [
  31. 'fieldset',
  32. attributes.hasClass('fieldgroup') ? 'fieldset--group',
  33. 'js-form-item',
  34. 'form-item',
  35. 'js-form-wrapper',
  36. 'form-wrapper',
  37. ]
  38. %}
  39. {%
  40. set wrapper_classes = [
  41. 'fieldset__wrapper',
  42. attributes.hasClass('fieldgroup') ? 'fieldset__wrapper--group',
  43. ]
  44. %}
  45. {%
  46. set legend_span_classes = [
  47. 'fieldset__label',
  48. attributes.hasClass('fieldgroup') ? 'fieldset__label--group',
  49. required ? 'js-form-required',
  50. required ? 'form-required',
  51. ]
  52. %}
  53. {%
  54. set legend_classes = [
  55. 'fieldset__legend',
  56. attributes.hasClass('fieldgroup') and not attributes.hasClass('form-composite') ? 'fieldset__legend--group',
  57. attributes.hasClass('form-composite') ? 'fieldset__legend--composite',
  58. title_display == 'invisible' ? 'fieldset__legend--invisible' : 'fieldset__legend--visible',
  59. ]
  60. %}
  61. {%
  62. set description_classes = [
  63. 'fieldset__description',
  64. ]
  65. %}
  66. <fieldset{{ attributes.addClass(classes) }}>
  67. {# Always wrap fieldset legends in a <span> for CSS positioning. #}
  68. {% if legend.title %}
  69. <legend{{ legend.attributes.addClass(legend_classes) }}>
  70. <span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>
  71. </legend>
  72. {% endif %}
  73. <div{{ content_attributes.addClass(wrapper_classes) }}>
  74. {% if description_display == 'before' and description.content %}
  75. <div{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</div>
  76. {% endif %}
  77. {% if inline_items %}
  78. <div class="container-inline">
  79. {% endif %}
  80. {% if prefix %}
  81. <span class="fieldset__prefix">{{ prefix }}</span>
  82. {% endif %}
  83. {{ children }}
  84. {% if suffix %}
  85. <span class="fieldset__suffix">{{ suffix }}</span>
  86. {% endif %}
  87. {% if errors %}
  88. <div class="fieldset__error-message">
  89. {{ errors }}
  90. </div>
  91. {% endif %}
  92. {% if description_display in ['after', 'invisible'] and description.content %}
  93. <div{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</div>
  94. {% endif %}
  95. {% if inline_items %}
  96. </div>
  97. {% endif %}
  98. </div>
  99. </fieldset>