file form-element.html.twig

Default theme implementation for a form element.

Available variables:

  • attributes: HTML attributes for the containing element.
  • errors: (optional) Any inline error messages to display for this form element; may not be set.
  • has_error: (optional) Flag indicating whether to add the "has_error" Bootstrap class for this form element.
  • required: The required marker, or empty if the associated form element is not required.
  • type: The type of the element.
  • name: The name of the element.
  • label: A rendered label element.
  • label_display: Label display setting. It can have these values:
    • before: The label is output before the element. This is the default. The label includes the #title and the required marker, if #required.
    • after: The label is output after the element. For example, this is used for radio and checkbox #type elements. If the #title is empty but the field is #required, the label will contain only the required marker.
    • invisible: Labels are critical for screen readers to enable them to properly navigate through forms but can be visually distracting. This property hides the label for everyone except screen readers.
    • attribute: Set the title attribute on the element to create a tooltip but output no label element. This is supported only for checkboxes and radios in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement(). It is used where a visual label is not needed, such as a table of checkboxes where the row and column provide the context. The tooltip will include the title and required marker.
  • description: (optional) A list of description properties containing:
    • content: A description of the form element, may not be set.
    • attributes: (optional) A list of HTML attributes to apply to the description content wrapper. Will only be set when description is set.
  • 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.
  • disabled: True if the element is disabled.
  • title_display: Title display setting.

See Also

  • template_preprocess_form_element()
Source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for a form element.
  5. *
  6. * Available variables:
  7. * - attributes: HTML attributes for the containing element.
  8. * - errors: (optional) Any inline error messages to display for this form
  9. * element; may not be set.
  10. * - has_error: (optional) Flag indicating whether to add the "has_error"
  11. * Bootstrap class for this form element.
  12. * - required: The required marker, or empty if the associated form element is
  13. * not required.
  14. * - type: The type of the element.
  15. * - name: The name of the element.
  16. * - label: A rendered label element.
  17. * - label_display: Label display setting. It can have these values:
  18. * - before: The label is output before the element. This is the default.
  19. * The label includes the #title and the required marker, if #required.
  20. * - after: The label is output after the element. For example, this is used
  21. * for radio and checkbox #type elements. If the #title is empty but the
  22. * field is #required, the label will contain only the required marker.
  23. * - invisible: Labels are critical for screen readers to enable them to
  24. * properly navigate through forms but can be visually distracting. This
  25. * property hides the label for everyone except screen readers.
  26. * - attribute: Set the title attribute on the element to create a tooltip but
  27. * output no label element. This is supported only for checkboxes and radios
  28. * in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
  29. * It is used where a visual label is not needed, such as a table of
  30. * checkboxes where the row and column provide the context. The tooltip will
  31. * include the title and required marker.
  32. * - description: (optional) A list of description properties containing:
  33. * - content: A description of the form element, may not be set.
  34. * - attributes: (optional) A list of HTML attributes to apply to the
  35. * description content wrapper. Will only be set when description is set.
  36. * - description_display: Description display setting. It can have these values:
  37. * - before: The description is output before the element.
  38. * - after: The description is output after the element. This is the default
  39. * value.
  40. * - invisible: The description is output after the element, hidden visually
  41. * but available to screen readers.
  42. * - disabled: True if the element is disabled.
  43. * - title_display: Title display setting.
  44. *
  45. * @ingroup templates
  46. *
  47. * @see template_preprocess_form_element()
  48. */
  49. #}
  50. {%
  51. set classes = [
  52. 'form-item',
  53. 'js-form-item',
  54. 'form-type-' ~ type|clean_class,
  55. 'js-form-type-' ~ type|clean_class,
  56. 'form-item-' ~ name|clean_class,
  57. 'js-form-item-' ~ name|clean_class,
  58. title_display not in ['after', 'before'] ? 'form-no-label',
  59. disabled == 'disabled' ? 'form-disabled',
  60. is_form_group ? 'form-group',
  61. is_radio ? 'radio',
  62. is_checkbox ? 'checkbox',
  63. is_autocomplete ? 'form-autocomplete',
  64. has_error ? 'error has-error'
  65. ]
  66. %}{%
  67. set description_classes = [
  68. 'description',
  69. 'help-block',
  70. description_display == 'invisible' ? 'visually-hidden',
  71. ]
  72. %}
  73. <div{{ attributes.addClass(classes) }}>
  74. {% if label_display in ['before', 'invisible'] %}
  75. {{ label }}
  76. {% endif %}
  77. {% if description_display == 'before' and description.content %}
  78. <div{{ description.attributes }}>
  79. {{ description.content }}
  80. </div>
  81. {% endif %}
  82. {{ children }}
  83. {% if label_display == 'after' %}
  84. {{ label }}
  85. {% endif %}
  86. {% if errors %}
  87. <div class="form-item--error-message alert alert-danger alert-sm">
  88. {{ errors }}
  89. </div>
  90. {% endif %}
  91. {% if description_display in ['after', 'invisible'] and description.content %}
  92. <div{{ description.attributes.addClass(description_classes) }}>
  93. {{ description.content }}
  94. </div>
  95. {% endif %}
  96. </div>

Related topics