How to handle .input-group

[cavasinf]

I'm struggling a bit with the "right" way to handle input groups with Symfony + TablerBundle.

According to the Symfony Bootstrap docs: https://symfony.com/doc/current/form/bootstrap5.html#input-group
The recommended way is to use row_attr with label and help, for example:

->add('surface', null, [
    'required' => true,
    'label'    => false,
    'help'     => $this->translator->trans('symbol.meter.square'),
    'row_attr' => [
        'class' => 'input-group',
    ],
])

And then in Twig:

<div class="mb-3">
    <label 
       class="form-label {% if form.surface.vars.required %}required{% endif %}"
       for="{{ form.surface.vars.id }}"
    >{{ 'label.surface'|trans }}</label>
    {{ form_row(form.surface) }}
</div>

But honestly this gets messy quite fast:

• You lose the native form_label
• You also lose the native help
• You have to manually handle for, required, etc.
• Errors rendering becomes ugly
• You end up re-implementing a lot of Symfony logic in Twig

On the other hand, if you go fully Twig-driven and not rely on row_attr, you keep everything (label, help, errors), but you have to manually wire the input group:

->add('surface', NumberType::class, [
    'required' => true,
    'label' => $this->translator->trans('label.surface'),
    'help'  => $this->translator->trans('label.surface'),
])

<div class="mb-3">
    {{ form_label(form.surface) }}
    <div class="input-group mb-2">
        {{ form_widget(form.surface) }}
        <span class="input-group-text">m²</span>
    </div>
    {{ form_help(form.surface) }}
    {{ form_errors(form.surface) }}
</div>

This feels cleaner in terms of rendering, but now:

• You must remember to always include form_help and form_errors
• You duplicate this pattern everywhere
• There is no real abstraction, it's just manual composition

---

What do you personally use / prefer in real projects?

• Symfony style with row_attr and custom labels?
• Fully Twig-driven input groups?
• Something else?
  Curious to know how others handle this, because right now both approaches feel a bit wrong in different ways.

[cavasinf]

@kevinpapst I'm thinking maybe the right solution for TablerBundle would be a dedicated input-group component that waits for the input, beforeInput and afterInput?

[kevinpapst]

Not sure what the best approach is. I can tell you what I do in Kimai.

For example input-group with icon:

• Allow icon as Form attribute: to https://github.com/kimai/kimai/blob/main/src/Form/Extension/IconExtension.php
• Then in my form layout define this

{% block text_widget -%}
        <div class="input-group">
            <div class="input-group-text">
                {{ icon(icon) }}
            </div>
            {{ block('form_widget_simple') }}
        </div>
{%- endblock text_widget %}

I have defined quite a few custom blocks for input-groups:
https://github.com/kimai/kimai/blob/main/templates/form/blocks.html.twig

If there is a better approach, please share, I am also interested!