aleph1.co.uk Git - yaffs-website/blob - web/core/themes/classy/templates/form/form-element.html.twig

   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>