Switch Buttons

Turns checkboxes and radio buttons in toggle switches

Default

<input type="checkbox" name="bs-switch" checked>

Inverse

<input type="checkbox" name="bs-switch" data-inverse="true" checked>

Readonly

<input type="checkbox" name="bs-switch" checked disabled>

No animation

<input type="checkbox" name="bs-switch" data-animate="false" checked>

Indeterminate

<input type="checkbox" name="bs-switch" data-indeterminate="true" checked>

Inside modal window

<button data-toggle="modal" data-target="#modal-switch" class="button button-theme button-rounded switch-modal-open text-uppercase">Open Modal</button>


<div id="modal-switch" tabindex="-1" role="dialog" aria-labelledby="modal-switch-label" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">&times;</span></button>
        <div id="modal-switch-label" class="modal-title"><h3>Follow the White Rabbit</h3></div>
      </div>
      <div class="modal-body">
        <input id="switch-modal" type="checkbox" name="bs-switch" checked>
        <br>
        <br>
        <input id="demo-fancy-switch-1m" class="fancy-switch fancy-switch-round" type="checkbox" checked>
        <label for="demo-fancy-switch-1m"></label>
        <br>
        <br>
        <input id="demo-fancy-switch-2m" class="fancy-switch fancy-switch-flat" type="checkbox" checked>
        <label for="demo-fancy-switch-2m"></label>
        <br>
        <br>
        <input id="demo-fancy-switch-3m" class="fancy-switch fancy-switch-rotate" type="checkbox" checked>
        <label for="demo-fancy-switch-3m" data-on="Wow" data-off="Modal"></label>
      </div>
    </div>
  </div>
</div>

Size

<input type="checkbox" name="bs-switch" data-size="mini" checked>
<br><br>
<input type="checkbox" name="bs-switch" data-size="small" checked>
<br><br>
<input type="checkbox" name="bs-switch" checked>
<br><br>
<input type="checkbox" name="bs-switch" data-size="large" checked>

On colors

<input type="checkbox" name="bs-switch" data-on-color="theme" checked>
<input type="checkbox" name="bs-switch" data-on-color="primary" checked>
<input type="checkbox" name="bs-switch" data-on-color="info" checked>
<input type="checkbox" name="bs-switch" data-on-color="success" checked>
<input type="checkbox" name="bs-switch" data-on-color="warning" checked>
<input type="checkbox" name="bs-switch" data-on-color="danger" checked>
<input type="checkbox" name="bs-switch" data-on-color="default" checked>

Off colors

<input type="checkbox" name="bs-switch" data-off-color="theme" checked>
<input type="checkbox" name="bs-switch" data-off-color="primary" checked>
<input type="checkbox" name="bs-switch" data-off-color="info" checked>
<input type="checkbox" name="bs-switch" data-off-color="success" checked>
<input type="checkbox" name="bs-switch" data-off-color="warning" checked>
<input type="checkbox" name="bs-switch" data-off-color="danger" checked>
<input type="checkbox" name="bs-switch" data-off-color="default" checked>

Custom text

<input type="checkbox" name="bs-switch" data-on-text="Enabled" data-off-text="Disabled" checked>
<input type="checkbox" name="bs-switch" data-on-text="12345" data-off-text="67890" data-on-color="info" checked>
<input type="checkbox" name="bs-switch" data-on-text="Here" data-off-text="There" data-on-color="success" data-off-color="warning" checked>
<input type="checkbox" name="bs-switch" data-on-text="Foo" data-off-text="Bar" data-on-color="danger" data-off-color="theme" checked>
<input type="checkbox" name="bs-switch" data-label-text="Kate!" checked>
<input type="checkbox" name="bs-switch" data-label-text="=" data-on-color="default" data-off-color="default" checked>

Custom icons

<input type="checkbox" name="bs-switch" data-on-text="<i class='fa fa-thumbs-o-up'></i>" data-off-text="<i class='fa fa-thumbs-o-down'></i>" data-on-color="success" data-off-color="danger" checked>
<input type="checkbox" name="bs-switch" data-on-text="Delete?" data-off-text="<i class='fa fa-trash-o'></i>" data-on-color="theme" data-off-color="danger" checked>
<input type="checkbox" name="bs-switch" data-on-text="<i class='fa fa-chevron-right'></i>" data-off-text="<i class='fa fa-chevron-left'></i>" data-on-color="info" data-off-color="info" checked>
<input type="checkbox" name="bs-switch" data-on-text="<i class='fa fa-play'></i>" data-off-text="<i class='fa fa-pause'></i>" data-on-color="default" data-off-color="default" checked>
<input type="checkbox" name="bs-switch" data-on-text="<i class='fa fa-font'></i>" data-off-text="<i class='fa fa-bold'></i>" data-on-color="primary" data-off-color="warning" checked>
<input type="checkbox" name="bs-switch" data-on-text="<i class='fa fa-cc-mastercard'></i>" data-off-text="<i class='fa fa-cc-visa'></i>" data-on-color="theme" data-off-color="theme" checked>
<input type="checkbox" name="bs-switch" data-on-text="<i class='fa fa-rocket'></i>" data-off-text="<i class='fa fa-space-shuttle'></i>" data-on-color="warning" data-off-color="warning" checked>
<input type="checkbox" name="bs-switch" data-on-text="<i class='fa fa-car'></i>" data-off-text="<i class='fa fa-bus'></i>" data-on-color="" data-off-color="" checked>

Custom width

<input type="checkbox" name="bs-switch" data-handle-width="25" data-on-text="25" data-off-text="XXV" checked>
<input type="checkbox" name="bs-switch" data-handle-width="50" data-on-text="50" data-off-text="L" checked>
<input type="checkbox" name="bs-switch" data-handle-width="75" data-on-text="75" data-off-text="LXXV" checked>
<input type="checkbox" name="bs-switch" data-handle-width="100" data-on-text="100" data-off-text="C" checked>
<input type="checkbox" name="bs-switch" data-handle-width="125" data-on-text="125" data-off-text="CXXV" checked>
<input type="checkbox" name="bs-switch" data-handle-width="150" data-on-text="150" data-off-text="CL" checked>
<br>
<p>Label width:</p>
<input type="checkbox" name="bs-switch" data-label-width="60" data-on-text="60" checked>
<input type="checkbox" name="bs-switch" data-label-width="120" data-on-text="120" checked>
<input type="checkbox" name="bs-switch" data-label-width="180" data-on-text="180" checked>

Multiple

Default

<input type="radio" name="bs-switch" data-radio-all-off="true" class="switch-radio2" checked>
<input type="radio" name="bs-switch" data-radio-all-off="true" class="switch-radio2">
<input type="radio" name="bs-switch" data-radio-all-off="true" class="switch-radio2">

Required

<input type="radio" name="bs-switch" class="switch-radio1" checked>
<input type="radio" name="bs-switch" class="switch-radio1">
<input type="radio" name="bs-switch" class="switch-radio1">

Fancy

Round

<input id="demo-fancy-switch-1a" class="fancy-switch fancy-switch-tiny fancy-switch-round" type="checkbox" checked>
<label for="demo-fancy-switch-1a"></label>
<br>
<input id="demo-fancy-switch-1b" class="fancy-switch fancy-switch-small fancy-switch-round" type="checkbox" checked>
<label for="demo-fancy-switch-1b"></label>
<br>
<input id="demo-fancy-switch-1c" class="fancy-switch fancy-switch-round" type="checkbox" checked>
<label for="demo-fancy-switch-1c"></label>
<br>
<input id="demo-fancy-switch-1d" class="fancy-switch fancy-switch-large fancy-switch-round" type="checkbox" checked>
<label for="demo-fancy-switch-1d"></label>
<br>
<input id="demo-fancy-switch-1e" class="fancy-switch fancy-switch-huge fancy-switch-round" type="checkbox" checked>
<label for="demo-fancy-switch-1e"></label>

Flat

<input id="demo-fancy-switch-2a" class="fancy-switch fancy-switch-tiny fancy-switch-flat" type="checkbox" checked>
<label for="demo-fancy-switch-2a"></label>
<br>
<input id="demo-fancy-switch-2b" class="fancy-switch fancy-switch-small fancy-switch-flat" type="checkbox" checked>
<label for="demo-fancy-switch-2b"></label>
<br>
<input id="demo-fancy-switch-2c" class="fancy-switch fancy-switch-flat" type="checkbox" checked>
<label for="demo-fancy-switch-2c"></label>
<br>
<input id="demo-fancy-switch-2d" class="fancy-switch fancy-switch-large fancy-switch-flat" type="checkbox" checked>
<label for="demo-fancy-switch-2d"></label>
<br>
<input id="demo-fancy-switch-2e" class="fancy-switch fancy-switch-huge fancy-switch-flat" type="checkbox" checked>
<label for="demo-fancy-switch-2e"></label>

Rotate

<input id="demo-fancy-switch-3a" class="fancy-switch fancy-switch-tiny fancy-switch-rotate" type="checkbox" checked>
<label for="demo-fancy-switch-3a" data-on="Yes" data-off="No"></label>
<br>
<input id="demo-fancy-switch-3b" class="fancy-switch fancy-switch-small fancy-switch-rotate" type="checkbox" checked>
<label for="demo-fancy-switch-3b" data-on="Yes" data-off="No"></label>
<br>
<input id="demo-fancy-switch-3c" class="fancy-switch fancy-switch-rotate" type="checkbox" checked>
<label for="demo-fancy-switch-3c" data-on="Yes" data-off="No"></label>
<br>
<input id="demo-fancy-switch-3d" class="fancy-switch fancy-switch-large fancy-switch-rotate" type="checkbox" checked>
<label for="demo-fancy-switch-3d" data-on="Yes" data-off="No"></label>
<br>
<input id="demo-fancy-switch-3e" class="fancy-switch fancy-switch-huge fancy-switch-rotate" type="checkbox" checked>
<label for="demo-fancy-switch-3e" data-on="Yes" data-off="No"></label>

⌃