Change checkbox design for Symfony Form (Bootstrap 3)

Question

Currently I use Symfony 3.0 with the default Bootstrap 3 form template. bootstrap_3_layout.html.twig

I like to extend the form template to have all my checkboxes like this:

<div class="md-checkbox-list">
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox1" class="md-check">
        <label for="checkbox1">
            <span></span>
            <span class="check"></span>
            <span class="box"></span> Option 1 </label>
    </div>
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox2" class="md-check" checked>
        <label for="checkbox2">
            <span></span>
            <span class="check"></span>
            <span class="box"></span> Option 2 </label>
    </div>
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox3" class="md-check">
        <label for="checkbox3">
            <span></span>
            <span class="check"></span>
            <span class="box"></span> Option 3 </label>
    </div>
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox4" disabled class="md-check">
        <label for="checkbox4">
            <span></span>
            <span class="check"></span>
            <span class="box"></span> Disabled </label>
    </div>
</div>

How could I do this? I tried a lot of things but I don't get it working. The Symfony Form templates are really complicated. Changes of some inputs or other easy things are working fine but checkboxes are not easy.

I hope somebody could help me because I have a lot of designs like these where I don't understand how to modify the checkbox style to look like this.

xabbuh · Accepted Answer · 2015-12-30 13:52:33Z

2

Checkboxes are rendered by the checkbox_widget block. You need to create your own form theme that overrides this block with your own layout.

When you are dealing with lists of checkboxes, you will also have to customise the choice_widget_expanded block. You need to be careful here as the type being used inside the choice depends on wether or not multiple selections are possible (radio vs. checkbox).

answered Dec 30, 2015 at 13:52

xabbuh

5,88118 silver badges20 bronze badges

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

Comments

Bart Bartoman · Accepted Answer · 2015-12-30 13:49:07Z

0

You should use a FormType to define your form.

$builder->add('cb1',  CheckboxType::class)->add('cb2',  CheckboxType::class);

Then in your twig, something like

{{ form_start(form, { 'attr': { 'class': 'form-horizontal form-bordered'} }) }}
    <div class="form-group">
        {{ form_label(form.cb1, 'cb1 label', { 'attr': {'class': 'control-label'} }) }}
        {{ form_widget(form.cb1, { 'attr': {'class': 'form-control custom-cb-class'} }) }}
    </div>
{{ form_rest(form) }}
{{ form_end(form) }}

answered Dec 30, 2015 at 13:49

Bart Bartoman

7664 silver badges14 bronze badges

Collectives™ on Stack Overflow

Change checkbox design for Symfony Form (Bootstrap 3)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related