You are here

fieldset.html.twig in Drupal 10

Default theme implementation 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> element.
  • 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/modules/system/templates/fieldset.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation 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
  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. * - description_display: Description display setting. It can have these values:
  18. * - before: The description is output before the element.
  19. * - after: The description is output after the element (default).
  20. * - invisible: The description is output after the element, hidden visually
  21. * but available to screen readers.
  22. * - children: The rendered child elements of the <fieldset>.
  23. * - prefix: The content to add before the <fieldset> children.
  24. * - suffix: The content to add after the <fieldset> children.
  25. *
  26. * @see template_preprocess_fieldset()
  27. *
  28. * @ingroup themeable
  29. */
  30. #}
  31. {%
  32. set classes = [
  33. 'js-form-item',
  34. 'form-item',
  35. 'js-form-wrapper',
  36. 'form-wrapper',
  37. ]
  38. %}
  39. <fieldset{{ attributes.addClass(classes) }}>
  40. {%
  41. set legend_span_classes = [
  42. 'fieldset-legend',
  43. required ? 'js-form-required',
  44. required ? 'form-required',
  45. ]
  46. %}
  47. {# Always wrap fieldset legends in a <span> for CSS positioning. #}
  48. <legend{{ legend.attributes }}>
  49. <span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>
  50. </legend>
  51. <div class="fieldset-wrapper">
  52. {% if description_display == 'before' and description.content %}
  53. <div{{ description.attributes.addClass('description') }}>{{ description.content }}</div>
  54. {% endif %}
  55. {% if errors %}
  56. <div>
  57. {{ errors }}
  58. </div>
  59. {% endif %}
  60. {% if prefix %}
  61. <span class="field-prefix">{{ prefix }}</span>
  62. {% endif %}
  63. {{ children }}
  64. {% if suffix %}
  65. <span class="field-suffix">{{ suffix }}</span>
  66. {% endif %}
  67. {% if description_display in ['after', 'invisible'] and description.content %}
  68. <div{{ description.attributes.addClass('description') }}>{{ description.content }}</div>
  69. {% endif %}
  70. </div>
  71. </fieldset>

Related topics