Customizable Switch Button Plugin For Bootstrap - Bootstrap Switch

A highly flexible and customizable jQuery plugin which converts the normal checkbox and radio inputs into swipe toggle switches using Bootstrap button styles.

Comes with lots of customization options, API methods and events. Works with both Bootstrap 4 and Bootstrap 3.

Code licensed under Apache License, Version 2.0.

See also:

• 10 Best Toggle Switch jQuery Plugins
• 10 Best Toggle Switch JavaScript And CSS Libraries 

Install the plugin via package managers:

# NPM
npm install bootstrap-switch

# Bower
bower install bootstrap-switch

How to use it:

1. Import the jQuery Bootstrap Switch plugin's files into your Bootstrap project.

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

2. Create a normal checkbox or radio button for the toggle switch.

<input type="checkbox" name="demo">
<input type="radio" name="demo">

3. Generate a default toggle switch as this:

$(".demo").bootstrapSwitch();

4. All possible plugin options to customize your toggle switch.

$(".demo").bootstrapSwitch({

  // The checkbox state
  state: true,

  // null, 'mini', 'small', 'normal', 'large'
  size: null,

  // Enable animation
  animate: true,

  // Disabled
  disabled: false,

  // Readonly
  readonly: false,

  // Indeterminate state
  indeterminate: false,

  // Inverse switch direction
  inverse: false,

  // Allow this radio button to be unchecked by the user
  radioAllOff: false,

  // Color of the left side of the switch
  onColor: 'primary',

  // Color of the right side of the switch
  offColor: 'default',

  // Text of the left side of the switch
  onText: 'ON',

  // Text of the right side of the switch
  offText: 'OFF',

  // Text of the center handle of the switch
  labelText: '&nbsp',

  // Width of the left and right sides in pixels
  handleWidth: 'auto',

  // Width of the center handle in pixels
  labelWidth: 'auto',

  // Global class prefix
  baseClass: 'bootstrap-switch',

  // Container element class(es)
  wrapperClass: 'wrapper',

  // Callback function to execute on initialization
  onInit: () => {},

  // Callback function to execute on switch state change. 
  // If false is returned, the status will be reverted, otherwise nothing changes
  onSwitchChange: () => {}
  
});

5. If you want to override the global settings:

$.fn.bootstrapSwitch.defaults.size = 'large';

6. API methods:

// In Bootstrap Switch, every option is also a method
$('.demo').bootstrapSwitch('OPTION', VALUE);

// toggle the state
$('.demo').bootstrapSwitch('toggleState');

// toggle the animation
$('.demo').bootstrapSwitch('toggleAnimate');

// toggle the disabled state
$('.demo').bootstrapSwitch('toggleDisabled');

// toggle the Readonly state
$('.demo').bootstrapSwitch('toggleReadonly');

// toggle the Indeterminate state
$('.demo').bootstrapSwitch('toggleIndeterminate');

// toggle the Inverse option
$('.demo').bootstrapSwitch('toggleInverse');

// destroy the plugin
$('.demo').bootstrapSwitch('destroy');

7. The plugin provides an event that will triggered on switch state change.

// Triggered on switch state change.
$('demo').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});

Changelog:

2019-04-13

• Updated for Bootstrap 4.

2018-04-12

• v3.3.4

2017-02-26

• Fix Object.assign not working for IE <= 11

---

This awesome jQuery plugin is developed by Bttstrp. For more Advanced Usages, please check the demo page or visit the official website.