How to add CSS class to <select> element on a Symfony generated form?

Question

I'm testing the FormBuilder. When I generate a <select> field, I can't figure out how to add a CSS class to this HTML element: Symfony adds the class to the parent <div>.

Here is my FormBuilder Class :

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
        // (...)
        ->add('roles', CollectionType::class, [
                'attr' => ['class' => 'MyClass'],
                'entry_type'   => ChoiceType::class,
                'entry_options'  => [
                    'label' => 'Select a role',
                    'label_attr' => [
                        'class' => 'form-label'
                    ],
                    'choices' => [
                        'User' => 'ROLE_USER',
                        'Admin' => 'ROLE_ADMIN',
                    ],
                ],
            ])
        // (...)
    }
}

Here is the HTML rendering :

<div id="user_roles" class="MyClass">
    <div>
        <label class="form-label required" for="user_roles_0">Select a role</label>
        <select id="user_roles_0" name="user[roles][0]">
            <option value="ROLE_USER" selected="selected">User</option>
            <option value="ROLE_ADMIN">Admin</option>
        </select>
    </div>
</div>

Here is the HTML rendering I would like to get :

<div id="user_roles">
    <div>
        <label class="form-label required" for="user_roles_0">Select a role</label>
        <select id="user_roles_0" name="user[roles][0]" class="MyClass">
            <option value="ROLE_USER" selected="selected">User</option>
            <option value="ROLE_ADMIN">Admin</option>
        </select>
    </div>
</div>

I've also tried to modify the class from the Twig template, but the result is the same.

Is there a way to assign this class to the <select> using the FormBuilder?

Can you show how you go about rendering the form in the html? Because you could do something like {{ form_widget(form.name, { 'attr' : { 'class' : 'MyClass' } }) }} — geertjanknapen
– geertjanknapen, Commented Apr 19, 2022 at 9:14

Marleen · Accepted Answer · 2022-04-19 09:25:57Z

2

To add the class to the select, move the attr array to the entry_options:

$builder
// (...)
->add('roles', CollectionType::class, [
        'entry_type'   => ChoiceType::class,
        'entry_options'  => [
            'attr' => ['class' => 'MyClass'],
            'label' => 'Select a role',
            'label_attr' => [
                'class' => 'form-label'
            ],
            'choices' => [
                'User' => 'ROLE_USER',
                'Admin' => 'ROLE_ADMIN',
            ],
        ],
    ])
// (...)

answered Apr 19, 2022 at 9:25

Marleen

2,9162 gold badges17 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

How to add CSS class to <select> element on a Symfony generated form?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related