Rails: simple_form radio buttons to switch (zurb foundation)

Question

I am trying to use the switch element from Zurb foundation on Rails radio buttons.

I have this code:

<%= simple_form_for @mymodel .... |f| %>

<%= f.input :active, as: :radio_buttons %>

<% end %>

Which generates a yes and no radio button.

I am now trying to implement the zurb foundation switch, since it looks nicer.

Zurb Foundation Switch element

Example code of a default switch:

<div class="switch">
  <input id="x" name="switch-x" type="radio" checked>
  <label for="x" onclick="">Off</label>

  <input id="x1" name="switch-x" type="radio">
  <label for="x1" onclick="">On</label>

  <span></span>
</div>

The Problem is, it looks like this:

<div class="switch">
    <div class="input radio_buttons optional mymodel_active">
    <label class="radio_buttons optional">active</label>
    <span class="radio">
    <input class="radio_buttons optional" id="mymodel_active_true" name="mymodel[active]" type="radio" value="true">
    <label class="collection_radio_buttons" for="mymodel_active_true">Yes</label>   
    </span>
    <span class="radio">
    <input checked="checked" class="radio_buttons optional" id="mymodel_active_false" name="mymodel[active]" type="radio" value="false">
    <label class="collection_radio_buttons" for="mymodel_active_false">No</label>
    </span>
    </div>
    <span></span>
</div>

Then I added: , label: false ,:input_html => { :onclick => ' ' } as attribute, to adjust to the example. It still won´t switch after the first time? I now have onclick="" on the input, but I need it on the label.

 <%= f.label :active , input_html: { :onclick => ' ' } %>

Will not work.

Anyone know the problem? Thanks

Answer 1

I suggest you to use simple form custom wrappers https://github.com/plataformatec/simple_form/wiki/Custom-Wrappers