Check-Switch = Nice Checkboxes and Radios

dependencies:

CSS:	`@import "magic/content/check_switch";`
JS:	`//= magic/check_switch`

<% label_col = "col-sm-9" %> <% switch_col = "col-sm-3 right_text" %>

Do you like Foobar

Decide if you like FOOBAR or not so much .. its all your descission

Do you like Foo

Do you like Bar


  <div class="check_switch active">
    <input type="checkbox" name="foobar" id="foobar" value="like" checked>
    <div class="switch_toggle"></div>
  </div>
  
  <div class="check_switch inactive">
    <input type="checkbox" name="foo" id="foo" value="like">
    <div class="switch_toggle"></div>
  </div>

<% label_col = "col-sm-11" %> <% switch_col = "col-sm-1 left_text" %>

Do you like FooBar?

Do you like Foo?

Do you like Bar?


  <div class="radio_switch active">
    <input type="radio" name="like" id="like_foo" value="foo" checked>
    <div class="switch_toggle"></div>
  </div>
  
  <div class="radio_switch inactive">
    <input type="radio" name="like" id="like_bar" value="bar">
    <div class="switch_toggle"></div>
  </div>

IF you have multiple Radio-Groups on one page use data-radio and class!


  <div class="radio_switch active radio-group1" data-radio="radio-group1">
    <input type="radio" name="like" id="like_foo" value="foo" checked>
    <div class="switch_toggle"></div>
  </div>
  
  <div class="radio_switch inactive radio-group1" data-radio="radio-group1">
    <input type="radio" name="like" id="like_bar" value="bar">
    <div class="switch_toggle"></div>
  </div>