Silex - Symfony Froms - How to wrap each radio button and its label in to separate div for each radio in choice list? - twig

Question

I am using Silex micro faramework with Symfony forms. In twig templet I generate this field using :
...
{{ form_widget(form.transport_selection) }}
...
How can I overwrite this symfony twig form templet to generate wrap for each set (input field and label) in Silex.
This is my twig registration:
use Silex\Provider\FormServiceProvider;
use Symfony\Component\Translation\Loader\YamlFileLoader;
use Symfony\Component\Validator\Constraints as Assert;
$app->register(new Silex\Provider\TwigServiceProvider(), array(
'twig.path' => [
__DIR__.'/App/View',
]
));
How to wrap radio button and label with div for each radio choice ?
output:
<div id="form_transport_selection">
<input type="radio" id="form_transport_selection_0" name="form[transport_selection]" required="required" value="country" checked="checked">
<label for="form_transport_selection_0" class="required">country</label>
<input type="radio" id="form_transport_selection_1" name="form[transport_selection]" required="required" value="abroad">
<label for="form_transport_selection_1" class="required">abroad</label>
</div>
Expected output:
<div id="form_transport_selection">
<div class="radio1">
<input type="radio" id="form_transport_selection_0" name="form[transport_selection]" required="required" value="country" checked="checked">
<label for="form_transport_selection_0" class="required">country</label>
</div>
<div class="radio2">
<input type="radio" id="form_transport_selection_1" name="form[transport_selection]" required="required" value="abroad">
<label for="form_transport_selection_1" class="required">abroad</label>
</div>
</div>
Thanks

Answer 1

You can make new template for this form and redefine radio buttons view
my.form.twig
{% extends "form_div_layout.html.twig" %}
{%- block choice_widget_expanded -%}
<div {{ block('widget_container_attributes') }}>
{% set i=1 %}
{%- for child in form %}
<div class="radio-{{i}}">
{{- form_widget(child) -}}
{{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
</div>
{% set i=i+1 %}
{% endfor -%}
</div>
{%- endblock choice_widget_expanded -%}
and use it in controller template, where form is shown
{% form_theme form 'my.form.twig' %}
....
{{ form_widget(form.transport_selection) }}

Answer 2

Expanding on MaxP's answer. Make sure to only modify this for radio buttons, you don't want this used in checkboxes! I've added a different class for checkboxes. Note the if/else to do this.
{% extends "form_div_layout.html.twig" %}
{% block choice_widget_expanded %}
<div {{ block('widget_container_attributes') }}>
{% set i=1 %}
{% for child in form %}
{% if form.vars.multiple == false %}
<div class="radio-{{i}}">
{% elseif form.vars.multiple == true %}
<div class="checkbox-{{i}}">
{% endif %}
{{ form_widget(child) }}
{{ form_label(child, null, {translation_domain: choice_translation_domain}) }}
</div>
{% set i=i+1 %}
{% endfor %}
</div>
{% endblock choice_widget_expanded %}
And use it in controller template, where form is shown
{% form_theme form 'my.form.twig' %}
....
{{ form_widget(form.transport_selection) }}
When using Symfony, I recommend overriding all Twig fields in app/Resources/views/Form/fields.html.twig
And then on config.yml you just need to make this available by adding it to twig's config
twig:
form_themes:
- 'Form/fields.html.twig'