How to add a switch toggle button to simple form in rails
14,669
Solution 1
Could you go to this link and check it out "Switches". getbootstrap.com
I hope this example serves you, I'm currently use Bootstrap 4.3 and Rails 5.2;
Use a "custom-switch" in the form of your Model and its going to work:
-- model/_form.html.erb
<%= form_with(model: employee, local: true) do |form| %>
<div class="custom-control custom-switch">
<%= form.check_box :active, class: "custom-control-input", id: "customSwitch1" %>
<label class="custom-control-label" for="customSwitch1">Status: </label>
</div>
<div class="actions">
<%= form.submit %>
</div>
<% end %>
I hope helps you, I'm a newbie in Rails and Bootstrap.
Regards!
Solution 2
I found this project very useful and complete. It is based on twitter bootstrap: http://www.bootstraptoggle.com/
There is a rails gem that embedded it :
Comments
-
Guy Dubrovski almost 2 years
I'm using Rails 4 and Simple Form with Bootstrap.
I want that my checkbox will not like that:
<%= c.input :my_bool_field, label: false, class: "form-control" %>
but something like that (I have the CSS for that)
<label class="switch switch-primary"> <input type="checkbox" /> <span></span> </label>
I know I can use simple_form wrappers, but I find them a little bit confusing.. Can someone help me up creating the checkbox with that styling?
-
Guy Dubrovski over 7 yearsnope.. the above code is generating:
<div class="checkbox"><input value="0" type="hidden" name="designer[company_attributes][email_monthly_summary]"><label><input class="boolean optional user-success" type="checkbox" value="1" checked="checked" name="designer[company_attributes][email_monthly_summary]" id="designer_company_attributes_email_monthly_summary"></label></div>
-
bkunzi01 over 7 yearsDid you use input_field or just c.input? Input_field should strip away the div wrapper.
-
bkunzi01 over 7 yearsThere's also a js function for it to work but you may find the easiest approach is to use the switchery-gem found here: github.com/abpetkov/switchery
-
Guy Dubrovski over 7 yearsthanks! it's a great progress the switch button appears but it is not reacting to clicks. here is the generated code:
<label class="switch switch-primary"> <input value="0" type="hidden" name="designer[company_attributes][email_monthly_summary]"><label><input label="false" class="boolean optional form-control user-success" type="checkbox" value="1" checked="checked" name="designer[company_attributes][email_monthly_summary]" id="designer_company_attributes_email_monthly_summary"></label> <span></span> </label>
-
Guy Dubrovski over 7 yearsthat was because the span was outside the label. the order of the label and input are off. any idea how to fix that?
-
Guy Dubrovski over 7 yearsthe switchery-gem is a great answer - please move to be an answer and not a comment.
-
Draken about 7 yearsWhilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.
-
Joe Bloggos over 5 yearsHi @GuyDubrovski trying to follow along here....did you get this working? or find another solution?