[Form] Add option to add a class to <div class="form-check"> (radio+checkbox)

[ThomasLandauer]

It would be nice to have an option to add a class name here (Bootstrap theme):
https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig#L193

That is the <div> around each radio button / checkbox.

Suggested name: choice_row_attr - since choice_attr addresses the <input>, and row_attr the <div> containing all the radios.

So if you either do:

public function finishView(FormView $view, FormInterface $form, array $options)
{
    $view['field'][0]->vars['choice_row_attr'] = ['class' => 'foo'];
}

... or ...

{% for key, field in form.field.children %}
    {{ form_widget(field, {'choice_row_attr': {'class':'foo'}}) }}
{% endfor %}

...the outcome would be:

<div class="form-check foo">
  <input type="radio" ...>
</div>
<div class="form-check foo">
  <input type="radio" ...>
</div>
<div class="form-check foo">
  <input type="radio" ...>
</div>

My use case:
I'm having a list of like 20 radio buttons, and depending on the user's selection in another field, some of them get hidden (with JavaScript).
Other use case would be to highlight some radios.

[javiereguiluz]

There's something I don't understand. You mentioned that choices are shown/hidden with JavaScript ... so you could add/remove/toggle those CSS classes using JavaScript, right?

[ThomasLandauer]

Yeah, sure, there's a workaround: Access the <input> by its id, then go to the parent node. But this will break if Bootstrap ever adds another container in there...
And being able to just add a v-show directive (or ng-show, or whatever they have in React) directly in the right place would really be nice ;-)
And I'm sure there are other (better) use cases as well...

The general issue is that radio buttons are missing some flexibility (which other types do have), since Symfony (in principle) sees them as one field, not as a series of single widgets.

[javiereguiluz]

Yes, this reminds me of the collection type, which didn't have a simple way to customize each collection item (and we made some changes in #36088 to fix that). So, we could do something similar here and allow to define attributes for each choice row. Let's ask @HeahDude what does he think about this. Thanks!

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[xabbuh]

Given that we didn't received the feedback by more people having the need for this feature I am closing here as the desired outcome can be achieved with a custom form type extension and a custom form theme. Thank you for understanding.

[VLynnik]

The question is relevant. There is a solution ?

[flmommens]

This is required to turn a simple checkbox into a switch https://getbootstrap.com/docs/5.0/forms/checks-radios/#switches

[ryckblick]

This is definitely a necessary feature. Came here, because I also wanted to turn a checkbox into a switch.

[derrabus]

If you need it, build it and submit a PR. This project is open source.

[ryckblick]

As this issue was closed with regards to "not enough feedback by more people" I think it is okay, to add ones feedback...
Anyhow, after some digging it seems, that this feature was actually added at one point but somehow got "lost" again. And I'm unsure how it got lost, as the Bootstrap markup didn't change in regards to switches from BS 4.3 to 5.x

Edit: Okay. The behavior is still working as described in the post I linked when enabling bootstrap_4_layout in twig.yaml but gets lost with bootstrap_5_layout

[ryckblick]

Solution: How to turn checkboxes into switches with Bootstrap 5.x
As mentioned here the option is available. But the trigger changed. Now you have to put 'checkbox-switch' in label_attr:
->add('...', CheckboxType::class, [ 'label_attr' => ['class' => 'checkbox-switch'] ])