Fork me on GitHub

Documentation 3 (Stable)

Options

Name Attribute Type Description Values Default
state checked Boolean The checkbox state true, false true
size data-size String The checkbox state null, 'mini', 'small', 'normal', 'large' null
animate data-animate Boolean Animate the switch true, false true
disabled disabled Boolean Disable state true, false false
readonly readonly Boolean Readonly state true, false false
indeterminate Boolean indeterminate state true, false false
onColor data-on-color String Color of the left side of the switch 'primary', 'info', 'success', 'warning', 'danger', 'default' 'primary'
offColor data-off-color String Color of the right side of the switch 'primary', 'info', 'success', 'warning', 'danger', 'default' 'default'
onText data-on-text String Text of the left side of the switch String 'ON'
offText data-off-text String Text of the right side of the switch String 'OFF'
labelText data-label-text String Text of the center handle of the switch String ' '
baseClass data-base-class String Global class prefix String 'bootstrap-switch'
wrapperClass data-wrapper-class String | Array Container element class(es) String | Array 'wrapper'
onInit Function Callback function to execute on initialization Function 
function(event, state) {}
onSwitchChange Function Callback function to execute on switch state change Function 
function(event, state) {}
radioAllOff data-radio-all-off Boolean Allow this radio button to be unchecked by the user true, false false

Global Defaults Overriding

Follow the jQuery convention to override the default options of the library. For instance:

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

Methods

In Bootstrap Switch, every option is also a method.

If the second parameter is omitted, the method return the current value.

You can invoke methods as follows:

$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);

Additional Methods

Name Description
toggleState Toggle the switch state
toggleDisabled Toggle the disabled state
toggleReadonly Toggle the readonly state
destroy Destroy the instance of Bootstrap Switch

Special Behaviours

Events

All the events are namespaced, therefore always append .bootstrapSwitch when you attach your handlers.
You can register to the emitted events as follow: 

$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});
Name Description Parameters
init Triggered on initialization. 'this' refers to the DOM element. event (jQuery Event object)
switchChange Triggered on switch state change. 'this' refers to the DOM element. event (jQuery Event object), state (true | false)

Examples

To be included

Licensed under the Apache License, Version 2.0 · Created by Mattia Larentis · Mantained by Emanuele Marchi