You are here

webform-section.html.twig in Webform 8.5

Same filename and directory in other branches
  1. 6.x templates/webform-section.html.twig

Default theme implementation for a webform section element and its children.

Available variables:

  • attributes: HTML attributes for the <section> element.
  • errors: (optional) Any errors for this <section> element, may not be set.
  • required: Boolean indicating whether the <section> element is required.
  • title: The title/header of the section header.
  • title_attributes: HTML attributes to apply to the title/header element.
  • title_tag: The title/header HTML tag.
  • 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. This is the default value.
    • 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 .section-wrapper children.
  • suffix: The content to add after the .section-wrapper children.

Copied from: fieldset.html.twig

File

templates/webform-section.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for a webform section element and its children.
  5. *
  6. * Available variables:
  7. * - attributes: HTML attributes for the <section> element.
  8. * - errors: (optional) Any errors for this <section> element, may not be set.
  9. * - required: Boolean indicating whether the <section> element is required.
  10. * - title: The title/header of the section header.
  11. * - title_attributes: HTML attributes to apply to the title/header element.
  12. * - title_tag: The title/header HTML tag.
  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. This is the default
  19. * value.
  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 .section-wrapper children.
  24. * - suffix: The content to add after the .section-wrapper children.
  25. *
  26. * Copied from: fieldset.html.twig
  27. *
  28. * @see template_preprocess_webform_section()
  29. *
  30. * @ingroup themeable
  31. */
  32. #}
  33. {%
  34. set classes = [
  35. 'js-form-item',
  36. 'form-item',
  37. 'js-form-wrapper',
  38. 'form-wrapper',
  39. 'webform-section',
  40. ]
  41. %}
  42. <section{{ attributes.addClass(classes) }}>
  43. {%
  44. set title_classes = [
  45. 'webform-section-title',
  46. required ? 'js-form-required',
  47. required ? 'form-required',
  48. ]
  49. %}
  50. {% if title %}
  51. <{{ title_tag }}{{ title_attributes.addClass(title_classes) }}>{{ title }}</{{ title_tag }}>
  52. {% endif %}
  53. <div class="webform-section-wrapper">
  54. {% if errors %}
  55. <div>
  56. {{ errors }}
  57. </div>
  58. {% endif %}
  59. {% if description_display in ['before', 'invisible'] and description.content %}
  60. <div{{ description.attributes.addClass('description') }}>{{ description.content }}</div>
  61. {% endif %}
  62. {% if prefix %}
  63. <span class="field-prefix">{{ prefix }}</span>
  64. {% endif %}
  65. {{ children }}
  66. {% if suffix %}
  67. <span class="field-suffix">{{ suffix }}</span>
  68. {% endif %}
  69. {% if description_display == 'after' and description.content %}
  70. <div{{ description.attributes.addClass('description') }}>{{ description.content }}</div>
  71. {% endif %}
  72. </div>
  73. </section>