Bootstrap Switch

Turn checkboxes and radio buttons in toggle switches.

Choose your version:

Download 3 (Release candidate)Download 2.0.1

Getting Started

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>
[...]

Options

NameTypeDescriptionValuesDefault
stateBooleanThe checkbox statetrue, false'checked' attribute or true
sizeStringThe checkbox state'mini', 'small', 'normal', 'large''normal'
animateBooleanAnimate the switchtrue, falsetrue
disabledBooleanDisable statetrue, false'disabled' attribute or false
readonlyBooleanReadonly statetrue, false'readonly' attribute or false
onColorStringColor of the left side of the switch'primary', 'info', 'success', 'warning', 'danger', 'default''primary'
offColorStringColor of the right side of the switch'primary', 'info', 'success', 'warning', 'danger', 'default''default'
onTextStringText of the left side of the switchString'ON'
offTextStringText of the right side of the switchString'OFF'
labelTextStringText of the center handle of the switchString'&nbsp;'
baseClassStringPrefix of every other used classString'bootstrap-switch'
wrapperClassString | ArrayContainer element class(es)String | Array'wrapper'
containerClassString | ArrayWrapper element class(es)String | Array'container'
handleOnClassString | ArrayHandle On element class(es)String | Array'handle-on'
handleOffClassString | ArrayHandle Off element class(es)String | Array'handle-off'
labelClassString | ArrayLabel element class(es)String | Array'label'
onModifierClassStringOn Modifier class, used when the switch state is trueString'on'
offModifierClassStringOff Modifier class, used when the switch state is falseString'off'
focusedModifierClassStringFocused Modifier class, used when the switch is focusedString'focused'
animateModifierClassStringAnimate Modifier class, used to apply CSS animation to the switchString'animate'
disabledModifierClassStringDisabled Modifier class, used the switch is disabledString'disabled'
readonlyModifierClassStringReadonly Modifier class, used the switch is readonlyString'readonly'
onInitFunctionCallback function to execute on initializationFunction
function(event, state) {}
onSwitchChangeFunctionCallback function to execute on switch state changeFunction
function(event, state) {}

Methods

In Bootstrap Switch, every option is also a method.

You can call a method in this way:

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

Additional Methods

NameDescription
toggleStateToggle the switch state
toggleDisabledToggle the disabled state
toggleReadonlyToggle the readonly state
destroyDestroy the instance of Bootstrap Switch

Events

You can register to the emitted events as follow:

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

Examples

State

   

Working on this...