skip to Main Content

I am trying to implement toggle switches from

gem ‘rails-bootstrap-toggle-buttons’


//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-toggle-buttons
//= require turbolinks
//= require_tree .


 *= require bootstrap-toggle-buttons
 *= require_tree .
 *= require_self


<%= f.check_box :email_notifications, :'data-toggle'=>"toggle" %>

Is just giving me a plain checkbox. Any clues on why this would not be working?



  1. If you’re using >Rails 4 and >Ruby 1.9

    <%= f.check_box :email_notifications, :data => { :toggle => 'toggle' } %>

    Make sure that your HTML is being generated correctly.

    <!-- Something like this -->
    <input type="checkbox" name="email_notifications" data-toggle="toggle">

    Then check the JavaScript console to make sure there are no errors.

    Login or Signup to reply.
  2. First: you wanted to have the toggle switches from but from what I see the rails-bootstrap-toggle-buttons gem seems to contain the toggle switches from This could have been your issue since the latter does not support initialization via the HTML data-toggle attribute.

    Since I also wanted to use the former library due to performance issues with the latter and did not find a gem which shipped it through the asset pipeline I created one: bootstrap-toggle-rails. You can find the documentation in the README.

    But: the data-toggle initialization method also didn’t work for me in combination with Turbolinks, but you can make it work by just initializing it manually with JavaScript and skip the data-toggle attribute and e.g. add a toggle class:

    $(document).on('ready page:change', function() {
      $('input[type="checkbox"].toggle').bootstrapToggle(); // assumes the checkboxes have the class "toggle"

    Note the page:change event, which is fired by Turbolinks, in addition to the ready event.

    Login or Signup to reply.
  3. And if you want to add style, simple do like:

    <%= f.check_box :subscribed_to_news, data: { toggle: 'toggle', style: 'ios' } %>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top