4 * Default theme implementation for a form element.
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
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
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.
47 * @see template_preprocess_form_element()
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',
62 is_checkbox ? 'checkbox',
63 is_autocomplete ? 'form-autocomplete',
64 has_error ? 'error has-error'
67 set description_classes = [
70 description_display == 'invisible' ? 'visually-hidden',
73 <div{{ attributes.addClass(classes) }}>
74 {% if label_display in ['before', 'invisible'] %}
78 {% if description_display == 'before' and description.content %}
79 <div{{ description.attributes }}>
80 {{ description.content }}
86 {% if label_display == 'after' %}
91 <div class="form-item--error-message alert alert-danger alert-sm">
96 {% if description_display in ['after', 'invisible'] and description.content %}
97 <div{{ description.attributes.addClass(description_classes) }}>
98 {{ description.content }}