Romaric Drigon
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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)
    {
        $builder
            // ...
            ->add('published', CheckboxType::class, [
                'label_attr' => ['class' => 'switch-custom'],
            ])
        ;
    }
}
Published in #Living on the edge