You are here

Home » API reference » Gin Layout Builder 1.0.x

form-element--gin-lb.html.twig in Gin Layout Builder 1.0.x

Theme override for a form element.

Available variables:

  • attributes: HTML attributes for the containing element.
  • errors: (optional) Any errors for this form element, may not be set.
  • prefix: (optional) The form element prefix, may not be set.
  • suffix: (optional) The form element suffix, may not be set.
  • 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()

File

templates/form/form-element--gin-lb.html.twig
View source 
  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.     'form-item__description',

  63.     description_display == 'invisible' ? 'visually-hidden',

  64.   ]

  65. %}

  66. <div{{ glb_classes(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{{ glb_classes(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="glb-form-item--error-message">

  87.       {{ errors }}

  88.     </div>

  89.   {% endif %}

  90.   {% if description_display in ['after', 'invisible'] and description.content %}

  91.     <div{{ glb_classes(description.attributes.addClass(description_classes)) }}>

  92.       {{ description.content }}

  93.     </div>

  94.   {% endif %}

  95. </div>