Bootstrap Switch

Turn checkboxes and radio buttons into toggle switches. Created by Mattia Larentis, maintained by Emanuele Marchi and Peter Stein with the help of the community. Compatible with Bootstrap 4, Bootstrap 3 and Bootstrap 2.

Play with demo on my fiddle.

Quick start

Several quick start options are available:

• Download the latest release
• Clone the repo: git clone https://github.com/Bttstrp/bootstrap-switch.git
• Install with npm: npm install bootstrap-switch
• Install with yarn: yarn add bootstrap-switch
• Install with Composer: composer require components/bootstrap-switch
• Install with Bower: bower install bootstrap-switch
• Install with NuGet: PM> Install-Package Bootstrap.Switch (NuGet package)

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 on it:

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

Enjoy.

Supported browsers

IE9+ and all the other modern browsers.

LESS

• For Bootstrap 2 (no longer officially supported), import src/less/bootstrap2/bootstrap-switch.less
• For Bootstrap 3, import src/less/bootstrap3/bootstrap-switch.less

SASS/SCSS

• For Bootstrap 4, import src/sass/bootstrap4/bootstrap-switch.scss

Bugs and feature requests

Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

The new issue should contain both a summary of the issue and the browser/OS environment in which it occurs and a link to the playground you prefer with the reduced test case. If suitable, include the steps required to reproduce the bug.

Please do not use the issue tracker for personal support requests: Stack Overflow is a better place to get help.

Known issues

• Make sure .form-control is not applied to the input. Bootstrap does not support that, refer to Checkboxes and radios

Integrations

• Angular: angular-bootstrap-switch
• Angular: angular-toggle-switch
• Knockout: knockout-bootstrap-switch

License

Licensed under the MIT License.

Changelog

3.4

• Full Bootstrap 4 integration of CSS + sources SASS/SCSS

3.3.4

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

3.3.3

• Deprecate CoffeeScript in favour of ES6+ with Babel
• Updated and restored documentation

3.3.2

• Fix for Flicker on initialisation #425, #422
• Prevent horizontal misalignment inside modal in page with odd width #414

3.3.1

• Revert of switchChange event triggered only on falsy skip #411

3.3.0

• Fixed setting of correct state on drag from indeterminate state #403
• Fixed broken state changing on hidden switch [#392, #383
• Missing animation on first state change triggered by side click #390
• SwitchChange event always triggered after change event #389
• Skip check for transitionend event on init #381
• Added stopPropagation on element mousedown #369
• Fixed wrong descrition in documentation #351

3.2.2

• Fixed wrong rendering of switch on initialisation if element is hidden #376

3.2.1

• Hotfix for broken initialisation logic if $.support.transition is not set #375

3.2.0

• Added option and method handleWidth to set a specific width of the side handled #341
• Added option and method labelWidth to set a specific width of the center label #341
• Fixed broken toggling of side handles when switch is wrapped in a external label #359
• Minor refactoring all along the source code

3.1.0

• Added inverse option to swap the position of the left and right elements #207
• Fixed misalignment on Safari #223
• Added options toggleAnimate method
• Enhanced documentation with new examples

3.0.2

• Added radioAllOff option. allow a group of radio inputs to be all off #322
• Made HTML options overridable by JavaScript initalization options #319
• .form-control does not interfere anymore with the switch appearance #318
• Fixed triggering of two events in case of jQuery id selector #317
• Fixed internal switching loop when toggling with spacebar #316
• Fixed switch label toggling not working with radio inputs #312

3.0.1

• Added support for intermediate state #218
• Added change event triggered on label click #299
• Added onInit and onSwitchChange event as methods

3.0.0

• API redesign for a more intuitive use
• Entire code source rewriting focused on cleanliness and performance
• Initialization options can be passed as JavaScript object or written as data-*
• Plugin constructor publicly available from $.fn.bootstrapSwitch.Constructor
• Plugin instance publicly available calling .data('bootstrap-switch')
• Global overridable defaults options
• Improved flexibility with baseClass and wrapperClass options
• New onInit event
• Event namespacing
• Full Bootstrap 3 support
• A lot of fixed bug, as usual