New in Symfony 5.1: Form theme improvements

New form theme for Foundation 6

Contributed by
Rémi Leclerc
in #34880.

Symfony provides several built-in form themes compatible with Bootstrap 3.x and 4.x and Foundation 5. In Symfony 5.1 we've added a new theme for the Foundation 6 framework.

First, link to the Foundation 6 assets from your application templates. Then, add foundation_6_layout.html.twig to the list of themes in the twig.form_themes config option and all your forms will be rendered with the Foundation 6 style.

Allow to translate Bootstrap input file

Contributed by
Dominik Müller
in #34278.

When using a Bootstrap custom form field to render <input type="file"> fields, the text of the button to select files is always displayed in English ("Browse...") instead of in the current application language.

Bootstrap allows to translate this text into any language via SCSS variables defined in your application styles. For example:

1
2
3
4
5

$custom-file-text: (
    en: "Browse",
    es: "Elegir",
    de: "Auswählen"
);

In Symfony 5.1 we've updated the Bootstrap form theme to select the label of the current application language and fall back to English if it's not available.

Allow to customize collection entries

Contributed by
Jules Pietri
in #36088.

The CollectionType form field allows to embed a series of forms in another form. You can customize each part of this form field using the same Twig blocks as for other fields:

1
2
3
4
5

{% block collection_row %} ... {% endblock %}
{% block collection_label %} ... {% endblock %}
{% block collection_widget %} ... {% endblock %}
{% block collection_help %} ... {% endblock %}
{% block collection_errors %} ... {% endblock %}

You can also customize specific collections instead of all of them. In Symfony 5.1 we've added new blocks so you can customize every part of each element of all collections:

1
2
3
4
5

{% block collection_entry_row %} ... {% endblock %}
{% block collection_entry_label %} ... {% endblock %}
{% block collection_entry_widget %} ... {% endblock %}
{% block collection_entry_help %} ... {% endblock %}
{% block collection_entry_errors %} ... {% endblock %}