[Toolkit] Provide a Symfony Form theme for each kit

[seb-jean]

Description

The Toolkit kits (bootstrap, flowbite-4, shadcn) ship ready-to-use Twig UI components, but nothing for Symfony Forms. As soon as an application renders a form with form_row() / form_widget(), the output falls back to Symfony's default markup and looks completely out of place next to the kit's components.
Everyone ends up writing (and maintaining) the same form theme by hand.

I'd like each kit to provide a recipe that installs a
templates/form/theme.html.twig file (or any other file name), built on top of form_div_layout.html.twig:

{% use 'form_div_layout.html.twig' %}

{% block form_label %}{# kit-specific markup #}{% endblock %}
{% block form_widget_simple %}{# ... #}{% endblock %}
{% block form_errors %}{# ... #}{% endblock %}
{% block form_help %}{# ... #}{% endblock %}

Installed the usual way:

php bin/console ux:install form-theme

and enabled in config/packages/twig.yaml:

twig:
    form_themes:
        - 'form/theme.html.twig' # adjust to the chosen file name

Starting from form_div_layout.html.twig keeps the theme minimal and predictable: only the blocks that need kit-specific classes are overridden, everything else keeps Symfony's default behaviour.

Note

One thing to keep in mind: the attribute-related blocks of form_div_layout.html.twig : widget_attributes, widget_container_attributes, button_attributes and attributes - render an already-serialized HTML string, not a structured set of attributes. So they can't be passed as-is to a Twig component (<twig:Input {{ block('widget_attributes') }} /> won't work), and adding a class means either merging into the attr variable before those blocks run, or overriding them entirely.

Open questions

• bootstrap kit: Symfony already ships bootstrap_5_layout.html.twig. Should the kit's theme extend it instead of form_div_layout.html.twig, or stay consistent with the other kits?
• Does the recipe installer already allow copying files outside templates/components/ (via copy-files)? If so, no change is needed there.

[smnandre]

I don't see any value to add a form theme for Bootstrap in fact... as Symfony Form already provide one..

But also, this would mean all kits must provide form elements, and this may be a hard requirement we don't want to grant for the future ? Should all kits have symfony-form-compatible components ?

[Kocal]

👎🏻 for me, for the same reasons than Simon

[seb-jean]

Bootstrap is already covered by bootstrap_5_layout.html.twig, and I agree this shouldn't turn into an implicit "every kit must be Symfony Form compatible" rule.

Would a documentation page be a better fit than shipped themes? Something like "Using a Toolkit kit with Symfony Forms", showing how to build a theme on top of form_div_layout.html.twig with the kit's components, plus the caveat about widget_attributes & co. rendering a pre-serialized HTML string rather than structured attributes (which is the part people actually get stuck on).

[smnandre]

Well, it's a complex topic, and I've already lost hours on it (as you'll understand in the upload MR :)

For now, I'm tempted to let people do whatever works for them, but we could 100% offer some help to anyone wanting to create a new kit. So if you wanna start a documentation page: 🤝

[seb-jean]

Deal 🤝

[ker0x]

I already maintain a form theme for Flowbite, tales-from-a-dev/flowbite-bundle, and I'm thinking of releasing one for Shadcn, since I'm already using a custom theme based on the Shadcn style in one of my projects!