title: How to split form_widget in twig
body: <p>I have a radio button form with 2 inputs</p>
  
  <pre><code>    $builder-&gt;add('intakeyear', ChoiceType::class, array(
          'choices' =&gt; array(
              '2017' =&gt; 2017,
              '2018' =&gt; 2018,
          ),
          'expanded' =&gt; true,
          'multiple' =&gt; false,
          'label' =&gt; 'Intake Year',
      ));
  </code></pre>
  
  <p>and in twig </p>
  
  <pre><code>&lt;div class="col-sm-3"&gt;{{ form_widget(form.intakeyear) }}&lt;/div&gt;
  </code></pre>
  
  <p>This renders the form as </p>
  
  <pre><code>&lt;input /&gt;
  &lt;label&gt;2017&lt;/label&gt;
  &lt;input /&gt;
  &lt;label&gt;2018&lt;/label&gt;
  </code></pre>
  
  <p>But I want to split the <code>{{ form_widget(form.intakeyear) }}</code> into individual options like:</p>
  
  <pre><code>{{ form_widget(form.intakeyear/choice_1/) }}
  
  {{ form_widget(form.intakeyear/choice_2/) }}
  </code></pre>
  
  <p>So that I can add the bootstrap class <code>radio-inline</code> to the label tags and have the final html output as:</p>
  
  <pre><code>&lt;label class="radio-inline"&gt;&lt;input /&gt;2017&lt;/label&gt;
  
  &lt;label class="radio-inline"&gt;&lt;input /&gt;2018&lt;/label&gt;
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here is a snapshot of the output I am getting:</p>
  
  <p><a href="https://i.stack.imgur.com/1NI73.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1NI73.png" alt="enter image description here"></a></p>
  
  <p>For better understanding here is my code:
  <code>index.html.twig</code>:</p>
  
  <pre><code>{% extends 'base.html.twig' %}
  
  {% block stylesheets %}
      {% stylesheets '@AppBundle/Resources/public/css/bootstrap.min.css' filter='cssrewrite' %}
      &lt;link rel="stylesheet" href="{{ asset_url }}" /&gt;
      {% endstylesheets %}
  {% endblock %}
  
  {% block body %}
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt; 
                  &lt;/button&gt;
                  &lt;a class="navbar-brand" href="#"&gt;EPITA&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;form class="navbar-form navbar-left"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input type="text" class="form-control" placeholder="Search"&gt;
                          &lt;div class="input-group-btn"&gt;
                              &lt;button class="btn btn-default" type="submit"&gt;
                                  &lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Sign Up&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Login&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;h2&gt;Candidate Application&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;/br&gt;    
          {{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }}
          &lt;div class="row form-group"&gt;
              &lt;div class="col-sm-3"&gt;{{ form_label(form.name,'Name' ,{'attr': {'class': 'sr-only'}}) }}&lt;/div&gt;
              &lt;div class="col-sm-3"&gt;{{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}&lt;/div&gt;
              &lt;div class="col-sm-6"&gt;{{ form_errors(form.name) }}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row form-group"&gt;
              &lt;div class="col-sm-3"&gt;{{ form_label(form.programtype) }}&lt;/div&gt;
              &lt;div class="col-sm-3"&gt;{{ form_widget(form.programtype, {'attr': {'class': 'form-control'}}) }}&lt;/div&gt;
              &lt;div class="col-sm-6"&gt;{{ form_errors(form.programtype) }}&lt;/div&gt;
          &lt;/div&gt;&lt;br/&gt;
          &lt;div class="row form-group"&gt;
              &lt;div class="col-sm-3"&gt;{{ form_label(form.programofinterest) }}&lt;/div&gt;
              &lt;div class="col-sm-3"&gt;{{ form_widget(form.programofinterest, {'attr': {'class': 'form-control'}}) }}&lt;/div&gt;
              &lt;div class="col-sm-6"&gt;{{ form_errors(form.programofinterest) }}&lt;/div&gt;
          &lt;/div&gt;&lt;br/&gt;
          &lt;div class="row form-group"&gt;
              &lt;div class="col-sm-3"&gt;{{ form_label(form.desiredintake) }}&lt;/div&gt;
              &lt;div class="col-sm-3"&gt;{{ form_widget(form.desiredintake, {'attr': {'class': 'form-control'}}) }}&lt;/div&gt;
              &lt;div class="col-sm-6"&gt;{{ form_errors(form.desiredintake) }}&lt;/div&gt;
          &lt;/div&gt;&lt;br/&gt;
          &lt;div class="row form-group"&gt;
              &lt;div class="col-sm-3"&gt;{{ form_label(form.intakeyear) }}&lt;/div&gt;
              &lt;div class="col-sm-3"&gt;{{ form_widget(form.intakeyear, {'label_attr': {'class': 'radio-inline'}}) }}&lt;/div&gt;
              &lt;div class="col-sm-6"&gt;{{ form_errors(form.intakeyear) }}&lt;/div&gt;
          &lt;/div&gt;&lt;br/&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-offset-3 col-sm-12"&gt;{{ form_row(form.save, {'attr': {'class': 'btn btn-primary'}}) }}&lt;/div&gt;
          &lt;/div&gt;
          {{ form_end(form) }}
      &lt;/div&gt;
  {% endblock %}
  
  {% block javascripts %}
      {% javascripts '@AppBundle/Resources/public/js/jquery-3.2.1.min.js' %}
      &lt;script src="{{ asset_url }}"&gt;&lt;/script&gt;
      {% endjavascripts %}
      {% javascripts '@AppBundle/Resources/public/js/NewCandidate.js' %}
      &lt;script src="{{ asset_url }}"&gt;&lt;/script&gt;
      {% endjavascripts %}
      &lt;script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"&gt;&lt;/script&gt;
      &lt;script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"&gt;&lt;/script&gt;
      {% javascripts '@AppBundle/Resources/public/js/bootstrap.min.js' %}
      &lt;script src="{{ asset_url }}"&gt;&lt;/script&gt;
      {% endjavascripts %}
  {% endblock %}
  </code></pre>
  
  <p><code>NewCandidate.js</code>:</p>
  
  <pre><code>//on page load do the following
          $(document).ready(function () {
                  //when the program type value changes do the following
                  $("#candidate_programtype").change(function () {
                      //get the program type element
                      var program_type_element = document.getElementById("candidate_programtype");
                      //get the program type value
                      var program_type = program_type_element.options[program_type_element.selectedIndex].value;
                      //initiate the ajax call
                      $.ajax({
                          type: "POST",
                          url: Routing.generate('homepage'),
                          contentType: 'application/x-www-form-urlencoded',
                          //send the program_type_id and flag to the server
                          data: {program_type_id: program_type, flag: 'program_type'},
                          //on successfull ajax call do the following
                          success: function (result, status, xhr) {
                              //parse the result and save it in pi_arr
                              var pi_arr = JSON.parse(result);
                              //remove all the options from the programofinterest select element
                              $("#candidate_programofinterest").empty();
                          //loop through the array pi_arr['pi'] one by one    
                          for (var i in pi_arr['pi']) {
                                  //add the option with value i and text pi_arr['pi'][i]
                                  $("#candidate_programofinterest").append($("&lt;option/&gt;", {"value": i, "text": pi_arr['pi'][i]}));
                              }
                              //remove all the options from the desiredintake select element
                              $("#candidate_desiredintake").empty();
                              //loop through array pi_arr['di'] one by one
                              for (var i in pi_arr['di']) {
                                  //add the option with value i and text pi_arr['di'][i]
                                  $("#candidate_desiredintake").append($("&lt;option/&gt;", {"value": i, "text": pi_arr['di'][i]}));
                              }
                          },
                          //on unsuccessfull ajax call do the following
                          error: function (xhr, status, error) {
  
                          }
                      });
                  });
                  //when the program of interest value changes do the following
                  $("#candidate_programofinterest").change(function () {
                      //get the program of interest element
                      var program_of_interest_element = document.getElementById("candidate_programofinterest");
                      //get the program of interest value
                      var program_of_interest = program_of_interest_element.options[program_of_interest_element.selectedIndex].value;
                      //initiate the ajax call
                      $.ajax({
                          type: "POST",
                          url: Routing.generate('homepage'),
                          contentType: 'application/x-www-form-urlencoded',
                          //send the program_of_interest_id and flag to the server
                          data: {program_of_interest_id: program_of_interest, flag: 'program_of_interest'},
                          //on successfull ajax call do the following
                          success: function (result, status, xhr) {
                              //parse the result and save it in di_arr
                              var di_arr = JSON.parse(result);
                              //remove all the options from the desiredintake select element
                              $("#candidate_desiredintake").empty();
                              //loop through array di_arr one by one
                              for (var i in di_arr) {
                                  //add the option with value i and text di_arr[i]
                                  $("#candidate_desiredintake").append($("&lt;option/&gt;", {"value": i, "text": di_arr[i]}));
                              }
                          },
                          //on unsuccessfull ajax call do the following
                          error: function (xhr, status, error) {
  
                          }
                      });
                  });
                  //when the desired intake value changes do the following
                  $("#candidate_desiredintake").change(function () {
                      //get the program type element
                      var program_type_element = document.getElementById("candidate_programtype");
                      //get the program type value
                      var program_type = program_type_element.options[program_type_element.selectedIndex].value;
  
                      //get the program of interest element
                      var program_of_interest_element = document.getElementById("candidate_programofinterest");
                      //get the program of interest value
                      var program_of_interest = program_of_interest_element.options[program_of_interest_element.selectedIndex].value;
  
                      //get the desired intake element
                      var desired_intake_element = document.getElementById("candidate_desiredintake");
                      //get the desired intake value
                      var desired_intake = desired_intake_element.options[desired_intake_element.selectedIndex].value;
                      //initiate the ajax call
  
                      $.ajax({
                          type: "POST",
                          url: Routing.generate('homepage'),
                          contentType: 'application/x-www-form-urlencoded',
                          //send the program_of_interest_id and flag to the server
                          data: {program_type_id: program_type, program_of_interest_id: program_of_interest, desired_intake_id: desired_intake, flag: 'desired_intake'},
                          //on successfull ajax call do the following
                          success: function (result, status, xhr) {
                              //parse the result and save it in intakeyear
                              var intakeyear = JSON.parse(result);
                              //remove all the options from the intakeyear select element
                              $("#candidate_intakeyear").empty();
                              $("#candidate_intakeyear").append($("&lt;option/&gt;", {"value": intakeyear, "text": intakeyear}));
                          },
                          //on unsuccessfull ajax call do the following
                          error: function (xhr, status, error) {
  
                          }
                      });
                  });
              });
  </code></pre>
  
  <p><code>CandidateType.php</code>:</p>
  
  <pre><code>&lt;?php
  
  namespace AppBundle\Form;
  
  use Symfony\Component\Form\AbstractType;
  use Symfony\Component\Form\FormBuilderInterface;
  use Symfony\Component\Form\Extension\Core\Type\TextType;
  use Symfony\Bridge\Doctrine\Form\Type\EntityType;
  use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
  use Doctrine\ORM\EntityRepository;
  use Symfony\Component\Form\Extension\Core\Type\SubmitType;
  use Symfony\Component\OptionsResolver\OptionsResolver;
  
  class CandidateType extends AbstractType {
  
      public function buildForm(FormBuilderInterface $builder, array $options) {
  
          $builder-&gt;add('name', TextType::class, array());
  
          $builder-&gt;add('programtype', EntityType::class, array(
              'class' =&gt; 'AppBundle:ProgramType',
              'query_builder' =&gt; function(EntityRepository $er) {
                  return $er-&gt;createQueryBuilder('p')
                                  -&gt;where('p.enabled = 1')
                                  -&gt;orderBy('p.id', 'ASC');
              },
              'choice_label' =&gt; 'description',
              'expanded' =&gt; false,
              'multiple' =&gt; false,
              'label' =&gt; 'Program Type',
          ));
  
          $builder-&gt;add('programofinterest', EntityType::class, array(
              'class' =&gt; 'AppBundle:ProgramOfInterest',
              'query_builder' =&gt; function(EntityRepository $er) {
                  return $er-&gt;createQueryBuilder('p')
                                  -&gt;where('p.enabled = 1')
                                  -&gt;orderBy('p.id', 'ASC');
              },
              'choice_label' =&gt; 'description',
              'expanded' =&gt; false,
              'multiple' =&gt; false,
              'label' =&gt; 'Program of Interest',
          ));
  
          $builder-&gt;add('desiredintake', EntityType::class, array(
              'class' =&gt; 'AppBundle:DesiredIntake',
              'query_builder' =&gt; function(EntityRepository $er) {
                  return $er-&gt;createQueryBuilder('p')
                                  -&gt;where('p.enabled = 1')
                                  -&gt;orderBy('p.id', 'ASC');
              },
              'choice_label' =&gt; 'description',
              'expanded' =&gt; false,
              'multiple' =&gt; false,
              'label' =&gt; 'Desired Intake',
          ));
  
  //        $builder-&gt;add('intakeyear', ChoiceType::class, array(
  //            'choices' =&gt; array(
  //                '2017' =&gt; 2017,
  //                '2018' =&gt; 2018,
  //            ),
  //            'expanded' =&gt; false,
  //            'multiple' =&gt; false,
  //            'label' =&gt; 'Intake Year',
  //        ));
  
          $builder-&gt;add('intakeyear', ChoiceType::class, array(
              'choices' =&gt; array(
                  '2017' =&gt; 2017,
                  '2018' =&gt; 2018,
              ),
              'expanded' =&gt; true,
              'multiple' =&gt; false,
              'label' =&gt; 'Intake Year',
              'label_attr' =&gt; array('class' =&gt; 'radio-inline'),
          ));
  
          $builder-&gt;add('save', SubmitType::class, array('label' =&gt; 'Submit'));
      }
  
      public function configureOptions(OptionsResolver $resolver) {
          $resolver-&gt;setDefaults(array(
              'data_class' =&gt; 'AppBundle\Entity\Candidate',
          ));
      }
  
  }
  </code></pre>