How to add wrapper around multiple checkbox on Symfony 4 form

Question

I have a list of checkbox created in a form with the following

->add('ISPreNbStudents', ChoiceType::class, [
            'multiple' => false,
            'choices'  => [
                '1' => 1,
                '2' => 2,
                '3' => 3,
                '4' => 4,
                '5' => 5,
            ],
            'expanded' => true
        ])

I can then display this in the twig file with this : {{ form_widget(form.ISOptMonths) }}

The problem is that it now display a list of label and input like this

<input type="radio" id="availability_ISPreNbStudents_0" name="availability[ISPreNbStudents]" value="1">
<label for="availability_ISPreNbStudents_0">1</label> 
<input type="radio" id="availability_ISPreNbStudents_1" name="availability[ISPreNbStudents]" value="2">
<label for="availability_ISPreNbStudents_1">2</label>

I need to put wrapper around each label/input like this

<div class="styled-input-single">
    <input type="checkbox" name="case-1" id="1" />
    <label for="1">1</label>
</div>
<div class="styled-input-single">
    <input type="checkbox" name="case-2" id="2" />
    <label for="2">2</label>
</div>

How can I achieve this ?

Mistraë · Accepted Answer · 2019-06-24 12:22:24Z

2

I've finally found the solution :

Here is how you print your list :

{{ form_row(registrationForm.firstRecourse) }}

Now is you want to add wrapper around every option :

<div class="row">
    {{ form_label(registrationForm.ISPreNbStudents) }}
    {% for checkbox in registrationForm.ISPreNbStudents.children %}
        <div class="styled-input-single">
            {{ form_widget(checkbox) }}
            {{ form_label(checkbox) }}
            {{ form_errors(checkbox) }}
        </div>
    {% endfor %}
</div>

answered Jun 24, 2019 at 12:22

Mistraë

3376 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas Baier · Accepted Answer · 2019-05-17 06:38:35Z

0

You have to use Symfony Customize Form Rendering.

This way you can access your form field by field, like:

{{ form_start(form) }}
    <div class="my-custom-class-for-errors">
        {{ form_errors(form) }}
    </div>

    <div class="row">
        <div class="col">
            {{ form_row(form.task) }}
        </div>
        <div class="col" id="some-custom-id">
            {{ form_row(form.dueDate) }}
        </div>
    </div>
{{ form_end(form) }}

You are able to render the fields manually also:

<div class="styled-input-single">
{{ form_widget(form.name_of_form_element) }}
{{ form_label(form.name_of_form_element) }}
<!-- and for errors of this field -->
{{ form_errors(form.name_of_form_element) }}
</div>

For rendering a select or option box manually check this link:
https://symfonycasts.com

edited May 17, 2019 at 6:38

answered May 15, 2019 at 19:02

Thomas Baier

4643 silver badges8 bronze badges

2 Comments

Mistraë Over a year ago

This won't work with like multiple checkbox options

Thomas Baier Over a year ago

I updated my answer with two new informations and a link to where you find a rendering example of a select and so on. Basically your are able to acces each attribute of your field. Id's, values, names e.t.c....Hope it helps.

Collectives™ on Stack Overflow

How to add wrapper around multiple checkbox on Symfony 4 form

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related