SymfonyWorld Online 2021 Winter Edition December 9 – 10, 2021 100% Online 25 talks and 10 workshops

New in Symfony 4.4: Bootstrap Custom Switches

Contributed by
Romaric Drigon
in #33954.

Symfony provides a Bootstrap 4 based theme as one of the optional themes you can use to style the application forms. In Symfony 4.4 we've improved it with support for Bootstrap custom switches

Switches, also called flip switches and toggles, are a way to style regular checkboxes to make them look more modern and dynamic. You've probably seen them in lots of smartphone applications and web sites:

A Bootstrap custom switch styling a Symfony Form checkbox

To use them in your Symfony forms, make sure to enable the Bootstrap 4 theme and add the switch-custom CSS class to the label of any CheckboxType form field:

namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\FormBuilderInterface;

class BlogPostType extends AbstractType
    public function buildForm(FormBuilderInterface $builder, array $options)
            // ...
            ->add('published', CheckboxType::class, [
                'label_attr' => ['class' => 'switch-custom'],
Help the Symfony project!

As with any Open-Source project, contributing code or documentation is the most common way to help, but we also have a wide range of sponsoring opportunities.


Nice. Thank you!
What about file inputs - I still dont like the bootstrap custom file input, and the custom-file-input class is hardcoded in the template :(
@Martin, that's a very good point: we are not being consistent, sometimes custom inputs are forced, sometimes they are not. It sounds like it should be changed for something easier to understand.
@Martin, it's due to the Bootstrap documentation, in the doc you only have the customize file input. But they expose 2 possibilities for checkboxes, and for radio (now 3 with the toggle).

That's why when the custom inputs for checkboxes and radios were implemented we have permit the availability to choose (with the default on non-custom). But the input file was implement before, and force the custom field.
Good game, thanks!
before I did that with the block_prefix property (with custom field block), now it'll be even simpler :)
Good, thanks !!!

True, that Bootstrap only have this single file input - but what a mess it is (UX-wise)

- You cant see the name of the file you are uploading
- You can not see if you actually have added a file
- You can not remove a file when its selected

This is something that a normal browser file input easily can.

Right now, the only way to remove this is by removing the custom-form SCSS from bootstrap (but this also removes the custom check/radios).

So I would really want some how that "custom-file-input" (its fine its enabled by default)

To my knowledges, with a default file input like, the only missing behavior is to diaplay the selected file name due to the theming (it's common to lot of file input customization).

You easily can do that with this javascript snippet:

var fileName = $(this).val();
Great! Thanks Romaric
Such a great thing ! Thanks !

Comments are closed.

To ensure that comments stay relevant, they are closed for old posts.