Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 713
Guy Dubrovski Avatar asked Sep 20 '16 12:09

Guy Dubrovski


People also ask

How do I create a toggle button in bootstrap?

Add data-toggle="buttons" to a . btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add . btn-group-toggle to style the <input> s within your buttons. Note that you can create single input-powered buttons or groups of them.

What is the difference between button and a toggle switch?

It's easy for designers to confuse toggle switches and toggle buttons because they both manage states, but there's a fundamental difference. Toggle switches are for system states, and toggle buttons are for contextual ones.

What is a toggle button switch?

A toggle button allows the user to change a setting between two states. You can add a basic toggle button to your layout with the ToggleButton object. Android 4.0 (API level 14) introduces another kind of toggle button called a switch that provides a slider control, which you can add with a Switch object.

How do you make a toggle button in JavaScript?

We can toggle a button using conditional statements like if-else statement in JavaScript. We can toggle almost all the properties of an element like its value, class, id, and color in JavaScript. To change any property of an element, we need to get the element using its id or class.


2 Answers

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!

like image 115
Gamaliel Avatar answered Sep 23 '22 08:09

Gamaliel


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 :

like image 26
nizzin Avatar answered Sep 24 '22 08:09

nizzin