Fork me on GitHub

Bootstrap switch

by Mattia Larentis (@SpiritualGuru) and Peter Stein


Size

ONOFF
ONOFF
ONOFF
ONOFF


Dimensions can be changed too:
ONOFF


  1. <div class="make-switch switch-large">
  2. <input type="checkbox" checked>
  3. </div>
  4.  
  5. <div class="make-switch">
  6. <input type="checkbox" checked>
  7. </div>
  8.  
  9. <div class="make-switch switch-small">
  10. <input type="checkbox" checked>
  11. </div>
  12.  
  13. <div class="make-switch switch-mini">
  14. <input type="checkbox" checked>
  15. </div>
  16.  
  17. <div id="dimension-switch" class="make-switch">
  18. <input type="checkbox" checked>
  19. </div>
  1. // Resets to the regular style
  2. $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
  3. // Sets a mini switch
  4. $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
  5. // Sets a small switch
  6. $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
  7. // Sets a large switch
  8. $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');

Colors

ONOFF
ONOFF
ONOFF
ONOFF
ONOFF
ONOFF


Colors can be changed too:
ONOFF


  1. <div class="make-switch" data-on="primary" data-off="info">
  2. <input type="checkbox" checked>
  3. </div>
  4.  
  5. <div class="make-switch" data-on="info" data-off="success">
  6. <input type="checkbox" checked>
  7. </div>
  8.  
  9. <div class="make-switch" data-on="success" data-off="warning">
  10. <input type="checkbox" checked>
  11. </div>
  12.  
  13. <div class="make-switch" data-on="warning" data-off="danger">
  14. <input type="checkbox" checked>
  15. </div>
  16.  
  17. <div class="make-switch" data-on="danger" data-off="default">
  18. <input type="checkbox" checked>
  19. </div>
  20.  
  21. <div class="make-switch" data-on="default" data-off="primary">
  22. <input type="checkbox" checked>
  23. </div>
  24.  
  25. <div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
  26. <input type="checkbox" checked>
  27. </div>
  1. $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
  2. $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');

Animation javascript

ONOFF


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

Disabled

ONOFF
  1. <div class="make-switch">
  2. <input type="checkbox" checked disabled>
  3. </div>

Text

SINO


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

Label Text

ONOFF
  1. <div class="make-switch" data-text-label="TV">
  2. <input type="checkbox" checked>
  3. </div>

HTML text

  1. <div class="make-switch" data-on-label="<i class='fa fa-ok fa fa-white'></i>" data-off-label="<i class='fa fa-remove'></i>">
  2. <input type="checkbox" checked />
  3. </div>

HTML text Label Icon

Standard
Font Awesome
Flat UI
  1. <div class="make-switch switch-large" data-label-icon="fa fa-fullscreen" data-on-label="<i class='fa fa-ok fa fa-white'></i>" data-off-label="<i class='fa fa-remove'></i>">
  2. <input type="checkbox" checked>
  3. </div>
  4.  
  5. <div class="make-switch switch-large" data-label-icon="fa fa-youtube fa fa-large" data-on-label="<i class='fa fa-thumbs-up fa fa-white'></i>" data-off-label="<i class='fa fa-thumbs-down'></i>">
  6. <input type="checkbox" checked>
  7. </div>
  8.  
  9. <div class="make-switch" data-label-icon="fui-video" data-on-label="<i class='fui-check fa fa-white'></i>" data-off-label="<i class='fui-cross'></i>">
  10. <input type="checkbox" checked>
  11. </div>

Event handler javascript

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

Label Event handler javascript

Label 1
ONOFF
Label 2
  1. <label id="label-toggle-switch">Click on this Text to change the switch state</label>
  2. <div class="label-toggle-switch make-switch">
  3. <input type="checkbox" checked />
  4. </div>
  5. <script>
  6. $('#label-toggle-switch').on('click', function(e, data) {
  7. $('.label-toggle-switch').bootstrapSwitch('toggleState');
  8. });
  9. $('.label-toggle-switch').on('switch-change', function (e, data) {
  10. alert(data.value);
  11. });
  12. </script>
  13.  
  14. <div id="label2-toggle-switch">
  15. <label class="label-change-switch">Click on this Text to change the switch state
  16. <div class="label2-toggle-switch make-switch">
  17. <input type="checkbox" checked />
  18. </div>
  19. </label>
  20. </div>
  21. <script>
  22. $('#label2-toggle-switch').on('switch-change', function(e, data) {
  23. alert(data.value);
  24. });
  25. </script>

Toggle State javascript

ONOFF


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

Destroy javascript

ONOFF


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

Create javascript



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

Disabled javascript

ONOFF


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

Radio javascript

ONOFF
ONOFF
ONOFF
  1. <div class="control-group">
  2. <div class="controls">
  3. <label for="option1">Option 1</label>
  4. <div class="make-switch radio1 radio-no-uncheck">
  5. <input id="option1" type="radio" name="radio1" value="option1">
  6. </div>
  7. <label for="option2">Option 2</label>
  8. <div class="make-switch radio1 radio-no-uncheck">
  9. <input id="option2" type="radio" name="radio1" value="option2">
  10. </div>
  11. <label for="option3">Option 3</label>
  12. <div class="make-switch radio1 radio-no-uncheck">
  13. <input id="option3" type="radio" name="radio1" value="option3">
  14. </div>
  15. </div>
  16. </div>
  17. <script>
  18. $('.radio1').on('switch-change', function () {
  19. $('.radio1').bootstrapSwitch('toggleRadioState');
  20. });
  21. // or
  22. $('.radio1').on('switch-change', function () {
  23. $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
  24. });
  25. // or
  26. $('.radio1').on('switch-change', function () {
  27. $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
  28. });
  29. </script>

Radio javascript (allow radios uncheck)

ONOFF
ONOFF
ONOFF
  1. <div class="control-group">
  2. <div class="controls">
  3. <label for="option11">Option 1</label>
  4. <div class="make-switch radio2">
  5. <input id="option11" type="radio" name="radio2" value="option1">
  6. </div>
  7. <label for="option12">Option 2</label>
  8. <div class="make-switch radio2">
  9. <input id="option12" type="radio" name="radio2" value="option2" checked="checked">
  10. </div>
  11. <label for="option13">Option 3</label>
  12. <div class="make-switch radio2">
  13. <input id="option13" type="radio" name="radio2" value="option3">
  14. </div>
  15. </div>
  16. </div>
  17. <script>
  18. $('.radio2').on('switch-change', function () {
  19. $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
  20. });
  21. </script>

Form - try to use tab, space and reset button

ONOFF
ONOFF
  1. <form class="form-horizontal">
  2. <div class="control-group">
  3. <label class="control-label" for="inputEmail">Email</label>
  4. <div class="controls">
  5. <input type="text" id="inputEmail" placeholder="Email">
  6. </div>
  7. </div>
  8. <div class="control-group">
  9. <label class="control-label" for="notification1">Notification 1</label>
  10. <div class="controls">
  11. <div class="make-switch" tabindex="0">
  12. <input id="notification1" type="checkbox">
  13. </div>
  14. </div>
  15. </div>
  16. <div class="control-group">
  17. <label class="control-label" for="notification2">Notification 2</label>
  18. <div class="controls">
  19. <div class="make-switch" tabindex="0">
  20. <input id="notification2" type="checkbox">
  21. </div>
  22. </div>
  23. </div>
  24. <div class="form-actions">
  25. <button type="reset" class="btn btn-inverse">Reset</button>
  26. </div>
  27. </form>

Modal

  1. <a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
  2.  
  3. <div class="modal-body">
  4. <div class="make-switch">
  5. <input type="checkbox" checked>
  6. </div>
  7. </div>