Wrap each collection item in nested (two) tags

[Erik Dahlstrand]

Hi,

I'm trying to put each collection item (radio button) in two nested divs:

<div class="inline fields">

  <label>Color</label>

  <div class="field">

    <div class="ui radio checkbox">

      <input class="hidden" name="car[color]" tabindex="0" type="radio" value="red" />

      <label>Red</label>

    </div>

  </div>

  <div class="field">

    <div class="ui radio checkbox">

      <input class="hidden" name="car[color]" tabindex="0" type="radio" value="green" />

      <label>Green</label>

    </div>

  </div>

  <div class="field">

    <div class="ui radio checkbox">

      <input class="hidden" name="car[color]" tabindex="0" type="radio" value="blue" />

      <label>Blue</label>

    </div>

  </div>

</div>

I.e. like this:

  <div class="field">

    <div class="ui radio checkbox">

       ...

    </div>

  </div>

So far I got the inner div but need to place each collection item in an outer <div class="field">...</div> as well.

  config.wrappers :semantic_radio_buttons, tag: 'div', class: "inline fields" do |b|

    b.use :html5

    b.use :label

    b.use :input, class: 'hidden'

  end

  = f.input :bias,

            collection: Car.colors.keys,

            as: :radio_buttons,

            wrapper: :semantic_radio_buttons,

            item_wrapper_tag: :div,

            item_wrapper_class: 'ui checkbox'

Any ideas?