Bootstrap Toggle

Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.

Visit http://www.bootstraptoggle.com for demos.

Getting Started

$3

You can download the latest version of Bootstrap Toggle or use CDN to load the library.

Warning If you are using Bootstrap v2.3.2, use bootstrap2-toggle.min.js and bootstrap2-toggle.min.css instead.

``html


`

$3


`bash
bower install bootstrap-toggle
`

Usage

$3

Simply add data-toggle="toggle" to convert checkboxes into toggles.

`html

`

$3


Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add data-toggle="toggle" to convert checkboxes into toggles.

`html


Option two is disabled

`

$3

Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add data-toggle="toggle" to a convert checkboxes into toggles.

`html

First


Second


Third

`

API

$3


Initialize toggles with id toggle-one with a single line of JavaScript.

`html


`

$3


Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled".

`html



`

Name|Type|Default|Description|
---|---|---|---
on|string/html|"On"|Text of the on toggle
off|string/html|"Off"|Text of the off toggle
size|string|"normal"|Size of the toggle. Possible values are large, normal, small, mini.
onstyle|string|"primary"|Style of the on toggle. Possible values are default, primary, success, info, warning, danger
offstyle|string|"default"|Style of the off toggle. Possible values are default, primary, success, info, warning, danger
style|string| |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
width|integer|null|Sets the width of the toggle. if set to null, width will be calculated.
height|integer|null|Sets the height of the toggle. if set to null, height will be calculated.

$3

Methods can be used to control toggles directly.

`html

`

Method|Example|Description
---|---|---
initialize|$('#toggle-demo').bootstrapToggle()|Initializes the toggle plugin with options
destroy|$('#toggle-demo').bootstrapToggle('destroy')|Destroys the toggle
on|$('#toggle-demo').bootstrapToggle('on')|Sets the toggle to 'On' state
off|$('#toggle-demo').bootstrapToggle('off')|Sets the toggle to 'Off' state
toggle|$('#toggle-demo').bootstrapToggle('toggle')|Toggles the state of the toggle
enable|$('#toggle-demo').bootstrapToggle('enable')|Enables the toggle
disable|$('#toggle-demo').bootstrapToggle('disable')|Disables the toggle

Events

$3

Note All events are propagated to and from input element to the toggle.

You should listen to events from the directly rather than look for custom events.

`html





`

$3

This also means that using the API or Input to trigger events will work both ways.

`html

On by API
Off by API
On by Input
Off by Input

``

$3

#### KnockoutJS

A binding for knockout is available here: aAXEe/knockout-bootstrap-toggle

Demos

Visit http://www.bootstraptoggle.com for demos.