Symfony2 - How to put label and input for checkboxes/radios in a same line?

Question

In my form I have some checkboxes, but by default, I have :

• the first radio widget
• the first label
• the second radio widget
• th

Answer 1

A label is pretty trivial, so I personally preferred to render it manually.

Quick and dirty in your twig:

<label for="field">
    {{ form_widget(form.field) }} Field Label
</label>

I would have liked if Symfony had a simpler solution for this but whatever.

Of course the above answers are perhaps more elegant and what not. ;)

Answer 2

I had the same problem, and I was unable to find a solution so I worked it out on my own. You are correct that you do need to override the {% block choice_widget %} block. The first step is to remove the {{ form_label(child) }} line from the {% if expanded %} section that prints out a separate label.

{% block choice_widget %}
{% spaceless %}
    {% if expanded %}
        <div {{ block('widget_container_attributes') }}>
        {% for child in form %}
            {{ form_widget(child) }}
        {#  {{ form_label(child) }} <--------------------- remove this line #}  
        {% endfor %}
        </div>
    {% else %}
    <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
        {% if empty_value is not none %}
            <option value="">{{ empty_value|trans }}</option>
        {% endif %}
        {% if preferred_choices|length > 0 %}
            {% set options = preferred_choices %}
            {{ block('widget_choice_options') }}
            {% if choices|length > 0 and separator is not none %}
                <option disabled="disabled">{{ separator }}</option>
            {% endif %}
        {% endif %}
        {% set options = choices %}
        {{ block('widget_choice_options') }}
    </select>
    {% endif %}
{% endspaceless %}
{% endblock choice_widget %}

Now you will just need to handle printing the label in the {% block checkbox_widget %} block.

{% block checkbox_widget %}
{% spaceless %}
    <label  for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}

You will need to do the same for {% block radio_widget %} since it would not otherwise have a label now.

{% block radio_widget %}
{% spaceless %}
    <label  for="{{ id }}"><input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock radio_widget %}

Answer 3

In Symfony 3+, you can simply pass the radio-inline class to your form via label_attr:

$builder->add('type', ChoiceType::class, [
    'expanded' => true, 
    'label_attr' => ['class' => 'radio-inline']
]);

No need to create custom widgets or so...

you can guess those things by looking at the bootstrap_4_layout.html.twig offered by Symfony in your vendor directory (src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig)

Hope this helps.