How can I use Twig tempalte to handle label of form input field?

Question

In a custom module (association), I have a form (MembershipStep3).
I'd like to use Twig template to handle form fields titles and need some advice about that.
In association.module, I have this code:

function association_theme()
{
  return [
    'association' => [
      'render element' => 'children',
    ],
    'membership_step3' => [
      'render element' => 'form',
      'template' => 'membership-step3',
    ],
  ];
}

In MembershipStep3.php, two almost identical fields are defined this way:

  public function buildForm(array $form, FormStateInterface $form_state) {

    $form = parent::buildForm($form, $form_state);
    $form['amap1'] = [
      '#type' => 'checkbox',
      '#title' => 'Je souhaite faire partie de l’AMAP (cas 1)',
    ];
    $form['amap2'] = [
      '#type' => 'checkbox',
    ];
    some other stuff...

And here is membership-step3.html.twig:

<form{{ attributes }}> {{ form.form_build_id }} {{ form.form_token }} {{ form.form_id }}

<div>

    {{ form.amap1 }}


    <br>
  {{ form.amap2 }}
    <label for="edit-amap2" class="option">
    Je souhaite faire partie de l’AMAP (cas 2)
    </label>

    {# Renders the rest of the form #} {{ form | without('amap1', 'amap2') }}

</div>

The result is:

The generated HTML is:

<div>

    <div class="js-form-item form-item js-form-type-checkbox form-item-amap1 js-form-item-amap1">
        <input data-drupal-selector="edit-amap1" type="checkbox" id="edit-amap1" name="amap1" value="1" class="form-checkbox">

        <label for="edit-amap1" class="option">Je souhaite faire partie de l’AMAP (cas 1)</label>
      </div>



    <br>
  <div class="js-form-item form-item js-form-type-checkbox form-item-amap2 js-form-item-amap2 form-no-label">
        <input data-drupal-selector="edit-amap2" type="checkbox" id="edit-amap2" name="amap2" value="1" class="form-checkbox">

        </div>

    <label for="edit-amap2" class="option">
    Je souhaite faire partie de l’AMAP (cas 2)
    </label>

As you can see, the label for amap2is outside of the div created by {{ form.amap2 }}.

How can I change my Twig template in order to have a result similar to amap1?

Answer 1

Drupal theming engine provides lots of layers. For example there's a twig template for the HTML wrapper (html.html.twig) then a template for the body (page.html.twig) which gets included in the HTML wrapper, then there's body elements which are included in the body template etc.

Forms are also same, there's a general Form wrapper, and when you print {{ form.amap1 }} in your membership-step3.html.twig this basically includes the checkboxes.html.twig, and passes it the $form['amap1'] array for the details to output.

The answer to your question is - I don't know why you're trying to do this. But the label is already output inside a different twig file, and this form wrapper twig is the wrong place to try and add in field/form element labels. All you need to do to make them look consistent is do what you did for amap1 - use the #title in the form array to specify the label. This way all you need in your membership-step3.html.twig file is:

<form{{ attributes }}> {{ form.form_build_id }} {{ form.form_token }} {{ form.form_id }}
  <div>{{ form }}</div>
</form> <!-- Don't forget the closing tag -->

Tip: Switch on Twig Debug to see where the templates came from straight inside the html output.