Fork me on GitHub

Bootstrap switch - by Mattia Larentis (@SpiritualGuru)

Downloads: ZIP TAR

Size





<div class="make-switch switch-large">
    <input type="checkbox" checked />
</div>

<div class="make-switch">
    <input type="checkbox" checked />
</div>

<div class="make-switch switch-small">
    <input type="checkbox" checked />
</div>

<div class="make-switch switch-mini">
    <input type="checkbox" checked />
</div>

<div id="dimension-switch" class="make-switch">
    <input type="checkbox" checked />
</div>
            
$('#dimension-switch').bootstrapSwitch('setSizeClass', '');               // Resets to the regular style
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');    // Sets a mini switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');   // Sets a small switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');   // Sets a large switch

Colors





<div class="make-switch" data-on="primary" data-off="info">
    <input type="checkbox" checked />
</div>

<div class="make-switch" data-on="info" data-off="success">
    <input type="checkbox" checked />
</div>

<div class="make-switch" data-on="success" data-off="warning">
    <input type="checkbox" checked />
</div>

<div class="make-switch" data-on="warning" data-off="danger">
    <input type="checkbox" checked />
</div>

<div class="make-switch" data-on="danger" data-off="default">
    <input type="checkbox" checked />
</div>

<div class="make-switch" data-on="default" data-off="primary">
    <input type="checkbox" checked />
</div>

<div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
    <input type="checkbox" checked />
</div>
            
$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');

Animation javascript



<div id="animated-switch" class="make-switch" data-animated="false">
    <input type="checkbox" checked />
</div>
             
$('#animated-switch').bootstrapSwitch('setAnimated', true);     // Enables animation for the selected item
$('#animated-switch').bootstrapSwitch('setAnimated', false);    // Disables animation for the selected item

Disabled

<div class="make-switch">
   <input type="checkbox" checked disabled />
</div>

Text



<div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
    <input type="checkbox" checked />
</div>
            
$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
$('#label-switch').bootstrapSwitch('setOffLabel', 'O');

Label Text

<div class="make-switch" data-text-label="My TV">
    <input type="checkbox" checked />
</div>

HTML text

<div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
    <input type="checkbox" checked />
</div>

HTML text Label Icon

Standard

Font Awesome

Flat UI

Standard

<div class="make-switch switch-large" data-label-icon="icon-fullscreen" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
    <input type="checkbox" checked />
</div>

Font Awesome

<div class="make-switch switch-large" data-label-icon="icon-youtube icon-large" data-on-label="<i class='icon-thumbs-up icon-white'></i>" data-off-label="<i class='icon-thumbs-down'></i>">
    <input type="checkbox" checked />
</div>

Flat UI

<div class="make-switch" data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
    <input type="checkbox" checked />
</div>

HTML text (mini-switch)

Standard

Font Awesome

Flat UI

Standard

<div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
    <input type="checkbox" checked />
</div>

Font Awesome

<div class="make-switch switch-mini" data-on-label="<i class='switch-mini-font-icons icon-thumbs-up icon-white'></i>" data-off-label="<i class='switch-mini-font-icons icon-thumbs-down'></i>">
    <input type="checkbox" checked />
</div>

Flat UI

<div class="make-switch switch-mini" data-on-label="<i class='switch-mini-font-icons fui-check icon-white'></i>" data-off-label="<i class='switch-mini-font-icons fui-cross'></i>">
    <input type="checkbox" checked />
</div>

Event handler javascript

$('#mySwitch').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    console.log(e, $el, value);
});

Label Event handler javascript

Label 1

Label 2

Label 1

<label id="label-toggle-switch">Click on this Text to change the switch state</label>
    <div class="label-toggle-switch make-switch">
        <input type="checkbox" checked />
    </div>
<script>
    $(document).ready(function() {
        $('#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);
        });
    });
</script>

Label 2

<div id="label2-toggle-switch">
    <label class="label-change-switch">Click on this Text to change the switch state
    <div class="label2-toggle-switch make-switch">
        <input type="checkbox" checked />
    </div>
    </label>
</div>
<script>
    $(document).ready(function() {
        $('#label2-toggle-switch').on('switch-change', function(e, data) {
            alert(data.value);
        });
    });
</script>

Toggle State javascript



Status!
ON!
Toggle me!
OFF!
$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false

Destroy javascript



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

Create javascript



Create
$('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();

Disabled javascript



$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false);  // true || false

Radio javascript

<div class="control-group">
    <div class="controls">
        <label class="control-label" for="option1">Option 1</label>
            <div id="option1" class="make-switch radio1 radio-no-uncheck">
                <input type="radio" name="radio1" value="option1" />
            </div>
        <label class="control-label" for="option2">Option 2</label>
            <div id="option2" class="make-switch radio1 radio-no-uncheck">
                <input type="radio" name="radio1" value="option2" />
            </div>
        <label class="control-label" for="option3">Option 3</label>
            <div id="option3" class="make-switch radio1 radio-no-uncheck">
                <input type="radio" name="radio1" value="option3" />
            </div>
    </div>
</div>            
<script>
    $(document).ready(function() {
        $('.radio1').on('switch-change', function () {
            $('.radio1').bootstrapSwitch('toggleRadioState');
        });
// or
        $('.radio1').on('switch-change', function () {
            $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
        });
// or
        $('.radio1').on('switch-change', function () {
            $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
        });
    });
</script>

Radio javascript (allow radios uncheck)

<div class="control-group">
    <div class="controls">
        <label class="control-label" for="option1">Option 1</label>
            <div id="option1" class="make-switch radio2">
                <input type="radio" name="radio2" value="option1" />
            </div>
        <label class="control-label" for="option2">Option 2</label>
            <div id="option2" class="make-switch radio2">
                <input type="radio" name="radio2" value="option2" checked="checked" />
            </div>
        <label class="control-label" for="option3">Option 3</label>
            <div id="option3" class="make-switch radio2">
                <input type="radio" name="radio2" value="option3" />
            </div>
    </div>
</div>            
<script>
    $(document).ready(function() {
        $('.radio2').on('switch-change', function () {
            $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
        });
    });
</script>

Form - try to use tab, space and reset button

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
            <input type="text" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="notification1">Notification 1</label>
        <div class="controls">
            <div class="make-switch" tabindex="0">
                <input id="notification1" type="checkbox" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="notification2">Notification 2</label>
        <div class="controls">
            <div class="make-switch" tabindex="0">
                <input id="notification2" type="checkbox" />
            </div>
        </div>
    </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" data-toggle="modal">Modal</a>
-----
<div class="modal-body">
    <div class="make-switch">
        <input type="checkbox" checked />
    </div>
</div>