form-element.html.twig 3.8 KB

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