How to change label position in a customized twig form theme - forms

Question

I try to override a symfony form theme. It works, that's the good news!
But I'd like to change the position of the label inside.
My form Builder:
$builder->add('phone', IntegerType::class, [
'label' => 'Telefonnummer',
'constraints' => [
new NotBlank(),
],
'attr' => [
'class' => 'input-field__input',
],
'label_attr' => [
'class' => 'input-field__label',
]
]);
My overridden integer_widget:
{% block integer_widget %}
<div class="input-field">
{% set type = type|default('number') %}
{{ block('form_widget_simple') }}
</div>
{% endblock %}
What I expected (shortened example):
<div class="input-field">
<label>Telefonnummer</label>
<input/>
</div>
What I got:
<label>Telefonnummer</label>
<div class="input-field">
<input/>
</div>
The label comes before the div and isn't inside. But I need it inside!
What i tried (works but in my opinion it is a mess):
{% block integer_widget %}
<div class="input-field">
{% block form_label %}
{% endblock %}
<label class="{{ label_attr.class }}">{{ label }}</label>
{% set type = type|default('number') %}
{{ block('form_widget_simple') }}
</div>
{% endblock %}
This way it looks like I expected. But it's just a workaround because i deleted the origin label by adding an empty 'form_label' block.
Is there a better solution to do this within the rules of symfony/twig?

Answer 1

If all you want is this :
<div class="input-field">
<label for="_input-a">Telefonnummer</label>
<input id="_input-a" name="_name" value="_value">
</div>
Then there is no need to bother yourself with a custom integer_widget
Doing this instead is enough :
<div class="input-field">
{{ form_label(form.phone) }}
{{ form_widget(form.phone) }}
</div>
It will render what you want.