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-item-' ~ name|clean_class, 53 'js-form-item-' ~ name|clean_class, 54 title_display not in ['after', 'before'] ? 'form-no-label', 55 disabled == 'disabled' ? 'form-disabled', 56 errors ? 'form-item--error', 57 ] 58%} 59{% 60 set description_classes = [ 61 'description', 62 description_display == 'invisible' ? 'visually-hidden', 63 ] 64%} 65<div{{ attributes.addClass(classes) }}> 66 {% if label_display in ['before', 'invisible'] %} 67 {{ label }} 68 {% endif %} 69 {% if prefix is not empty %} 70 <span class="field-prefix">{{ prefix }}</span> 71 {% endif %} 72 {% if description_display == 'before' and description.content %} 73 <div{{ description.attributes }}> 74 {{ description.content }} 75 </div> 76 {% endif %} 77 {{ children }} 78 {% if suffix is not empty %} 79 <span class="field-suffix">{{ suffix }}</span> 80 {% endif %} 81 {% if label_display == 'after' %} 82 {{ label }} 83 {% endif %} 84 {% if errors %} 85 <div class="form-item--error-message"> 86 {{ errors }} 87 </div> 88 {% endif %} 89 {% if description_display in ['after', 'invisible'] and description.content %} 90 <div{{ description.attributes.addClass(description_classes) }}> 91 {{ description.content }} 92 </div> 93 {% endif %} 94</div> 95