Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches

# Bootstrap Switch

Turn checkboxes and radio buttons in toggle switches.

Download Bootstrap Switch 3 Release Candidate
Download Stable Bootstrap Switch 2

Mattia Larentis · Peter Stein · Emanuele Marchi

## Getting started

Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.

    [...]
    <link href="bootstrap.css" rel="stylesheet">
    <link href="bootstrap-switch.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="bootstrap-switch.js"></script>
    [...]

Add your checkbox.

    <input type="checkbox" name="my-checkbox" checked>

Initialize Bootstrap Switch.

    $("[name='my-checkbox']").bootstrapSwitch();

Enjoy.

## Documentation

### Sizes

Change the size programmatically:

    <input type="checkbox" checked data-size="large">
    <input type="checkbox" checked>
    <input type="checkbox" checked data-size="small">
    <input type="checkbox" checked data-size="mini">
    <input id="dimension-switch" type="checkbox" checked>

    // Resets to the regular style
    $('#dimension-switch').bootstrapSwitch('size', '');

    // Sets a mini switch
    $('#dimension-switch').bootstrapSwitch('size', 'mini');

    // Sets a small switch
    $('#dimension-switch').bootstrapSwitch('size', 'small');

    // Sets a large switch
    $('#dimension-switch').bootstrapSwitch('size', 'large');

### Colors

Change the colors programmatically:

    <input type="checkbox" checked data-on-color="primary" data-off-color="info">
    <input type="checkbox" checked data-on-color="info" data-off-color="success">
    <input type="checkbox" checked data-on-color="success" data-off-color="warning">
    <input type="checkbox" checked data-on-color="warning" data-off-color="danger">
    <input type="checkbox" checked data-on-color="danger" data-off-color="default">
    <input type="checkbox" checked data-on-color="default" data-off-color="primary">
    <input type="checkbox" id="change-color-switch" checked data-on-color="default" data-off-color="primary">

    $('#change-color-switch').bootstrapSwitch('onColor', 'success');
    $('#change-color-switch').bootstrapSwitch('offColor', 'danger');

### Animation JavaScript

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

    // Enables animation for the selected item
    $('#animated-switch').bootstrapSwitch('animate', true);

    // Disables animation for the selected item
    $('#animated-switch').bootstrapSwitch('animate', false);

### Disabled / Readonly

    <input type="checkbox" checked disabled>
    <input type="checkbox" checked readonly>

### Text

    <input type="checkbox" checked data-on-text="SI" data-off-text="NO">

    $('#label-switch').bootstrapSwitch('onText', 'I');
    $('#label-switch').bootstrapSwitch('offText', 'O');

### Label Text

    <input type="checkbox" checked data-label-text="TV">

### Icon Label Text

Standard Font Awesome Flat UI

    <input type="checkbox" checked data-size="large" data-label-text="<span class='glyphicon glyphicon-fullscreen'></span>" data-on-text="<span class='glyphicon glyphicon-ok'></span>" data-off-text="<span class='glyphicon glyphicon-remove'></span>">
    <input type="checkbox" checked data-size="large" data-label-text="<span class='fa fa-youtube fa-lg'></span>" data-on-text="<span class='fa fa-thumbs-up fa-lg'></span>" data-off-text="<span class='fa fa-thumbs-down fa-lg'></span>">
    <input type="checkbox" data-size="large" checked data-label-text="<span class='fui-video'></span>" data-on-text="<span class='fui-check'></span>" data-off-text="<span class='fui-cross'></span>">

### Event Handler JavaScript

    $('#switch-change').on('switchChange', function (e, data) {
      var $element = $(data.el),
          value = data.value;

      console.log(e, $element, value);
    });

### Label Event Handler JavaScript

Click on this Text to change the switch state

    <label id="label-toggle-switch">Click on this Text to change the switch state</label>
    <input type="checkbox" checked>

    $('#label-toggle-switch').on('click', function(e, data) {
        $('.label-toggle-switch').bootstrapSwitch('toggleState');
    });
    $('.label-toggle-switch').on('switch-change', function (e, data) {
        alert(data.value);
    });

### State JavaScript

State!
On
Toggle
Off

    $('#toggle-state-switch').bootstrapSwitch('state'); // true || false
    $('#toggle-state-switch').bootstrapSwitch('toggleState');
    $('#toggle-state-switch').bootstrapSwitch('state', false); // true || false

### Destroy JavaScript

    $('#destroy-switch').bootstrapSwitch('destroy');

### Disable / Readonly JavaScript

Disable controls
Readonly controls

    $('#disable-switch').bootstrapSwitch('disabled');
    $('#disable-switch').bootstrapSwitch('toggleDisabled');
    $('#disable-switch').bootstrapSwitch('disabled', true);  // true || false

    $('#readonly-switch').bootstrapSwitch('readonly');
    $('#readonly-switch').bootstrapSwitch('toggleReadonly');
    $('#readonly-switch').bootstrapSwitch('readonly', true);  // true || false

### Radio JavaScript

Option 1 Option 2 Option 3

    <div class="form-group">
      <label for="option1">Option 1</label>
      <input id="option1" type="radio" name="radio1" value="option1">
      <label for="option2">Option 2</label>
      <input id="option2" type="radio" name="radio1" value="option2">
      <label for="option3">Option 3</label>
      <input id="option3" type="radio" name="radio1" value="option3">
    </div>

### Form

Email
Notification 1
Notification 2

    <form class="form-horizontal">
      <div class="form-group">
        <label class="control-label" for="inputEmail">Email</label>
        <input type="text" id="inputEmail" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="control-label" for="notification1">Notification 1</label>
        <input id="notification1" type="checkbox">
      </div>
      <div class="form-group">
        <label class="control-label" for="notification2">Notification 2</label>
        <input id="notification2" type="checkbox">
      </div>
      <div class="form-actions">
        <button type="reset" class="btn btn-inverse">Reset</button>
      </div>
    </form>

### Modal

Modal

    <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>

    <div class="modal-body">
      <input type="checkbox" checked>
    </div>

### Modal