Drupal Twig Template Structure of (Some) Form Elements

2020. Mar. 18. · 1 min read
I built a form with Webform module and checked Twig debug info.

Textarea

- form-element.html.twig
  - form-element-label.html.twig
  - textarea.html.twig

Textfield, email, other text-like inputs…

- form-element.html.twig
  - form-element-label.html.twig
  - input.html.twig

Checkbox (single)

- form-element.html.twig
  - input.html.twig
  - form-element-label.html.twig

Checkboxes

- fieldset.html.twig - webform module can define general `div` wrapper as well
  - checkboxes.html.twig
    - form-element.html.twig
      - input.html.twig
      - form-element-label.html.twig
    - form-element.html.twig
      - input.html.twig
      - form-element-label.html.twig

Radios

- fieldset.html.twig - webform module can define general `div` wrapper as well
  - radios.html.twig
    - form-element.html.twig
      - input.html.twig
      - form-element-label.html.twig
    - form-element.html.twig
      - input.html.twig
      - form-element-label.html.twig

Select

- form-element.html.twig
  - form-element-label.html.twig
  - select.html.twig

File

- div style="" – appears after file upload, no template info!!
  - div id=ajax-wrapper – no template info!
    - form-element.html.twig
      - form-element-label.html.twig  
        - file-managed-file.html.twig
          (Upload)
          - input.html.twig
          (+ hidden inputs: upload, edit buttons)
          (Uploaded file)
          - form-element.html.twig
            - input.html.twig
              - form-element-label.html.twig
                - file-link.html.twig
          (Remove selected file button)
          - input.html.twig      
        - div class=description – no template info!!
          - container.html.twig
            - file-upload-help.html.twig
  - span class=ajax--wrapper--[id] style="" – appears after file upload, no template info!!

Submit

- container.html.twig
  - input.html.twig

Notes

  • input.html.twig is used for hidden fields too
  • Webform module uses webform.htm.twig to add the form wrapper