CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrapsimple-form
Guy Dubrovski
Guy Dubrovski

Reputation: 1560

How to add a switch toggle button to simple form in rails

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" %>

enter image description here

but something like that (I have the CSS for that)

<label class="switch switch-primary">
    <input type="checkbox" />
    <span></span>
</label>

enter image description here

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?

Upvotes: 10

Views: 20904

Answers (4)

Gamaliel
Gamaliel

Reputation: 465

Could you go to this link and check it out "Switches". getbootstrap.com

enter image description here

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!

Upvotes: 7

nizzin
nizzin

Reputation: 31

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 :

Upvotes: 3

bkunzi01
bkunzi01

Reputation: 4561

Checkout the Rails Switchery gem found at https://github.com/abpetkov/switchery

Easy customization for bootstrap and ios style switches without trying to change simpleforms pre-built wrappers via the initializer or calling jquery functions in the view.

Upvotes: 0

Bartłomiej Gładys
Bartłomiej Gładys

Reputation: 4615

just put checkbox inside 

<label class="switch switch-primary">
     <%= f.input_field :my_bool_field, label: false, as: :boolean, class: 'form-control' %>
    <span></span>
</label>

Upvotes: 0

Related Questions