Getting Started
Installation
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.
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
Bower Install
bower install bootstrap-toggle
Usage
Basic example
Simply add data-toggle="toggle"
to convert checkboxes into toggles.
<input type="checkbox" checked data-toggle="toggle">
Stacked checkboxes
Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add data-toggle="toggle"
to convert checkboxes into toggles.
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle">
Option one is enabled
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" disabled data-toggle="toggle">
Option two is disabled
</label>
</div>
Inline Checkboxes
Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add data-toggle="toggle"
to a convert checkboxes into toggles.
<label class="checkbox-inline">
<input type="checkbox" checked data-toggle="toggle"> First
</label>
<label class="checkbox-inline">
<input type="checkbox" data-toggle="toggle"> Second
</label>
<label class="checkbox-inline">
<input type="checkbox" data-toggle="toggle"> Third
</label>
API
Initialize by JavaScript
Initialize toggles with id toggle-one
with a single line of JavaScript.
<input id="toggle-one" checked type="checkbox">
<script>
$(function() {
$('#toggle-one').bootstrapToggle();
})
</script>
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-on="Enabled"
.
<input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
<input type="checkbox" id="toggle-two">
<script>
$(function() {
$('#toggle-two').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
})
</script>
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 Refer to Bootstrap Button Sizes documentation for more information. |
onstyle | string | "primary" |
Style of the on toggle. Possible values are: default ,primary ,success ,info ,warning ,danger Refer to Bootstrap Button Options documentation for more information. |
offstyle | string | "default" |
Style of the off toggle. Possible values are: default ,primary ,success ,info ,warning ,danger Refer to Bootstrap Button Options documentation for more information. |
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. |
Methods
Methods can be used to control toggles directly.
<input id="toggle-demo" type="checkbox" data-toggle="toggle">
Method | Example | Description | Demo |
---|---|---|---|
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
Event Propagation
Note All events are propagated to and from input element to the toggle.
You should listen to events from the <input type="checkbox">
directly rather than look for custom events.
<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
API vs Input
This also means that using the API or Input to trigger events will work both ways.
<input id="toggle-trigger" type="checkbox" data-toggle="toggle">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-success" onclick="toggleOnByInput()">On by Input</button>
<button class="btn btn-danger" onclick="toggleOffByInput()">Off by Input</button>
<script>
function toggleOn() {
$('#toggle-trigger').bootstrapToggle('on')
}
function toggleOff() {
$('#toggle-trigger').bootstrapToggle('off')
}
function toggleOnByInput() {
$('#toggle-trigger').prop('checked', true).change()
}
function toggleOffByInput() {
$('#toggle-trigger').prop('checked', false).change()
}
</script>
Demos
Sizes
Bootstrap toggle is available in different sizes. Refer to Bootstrap Button Sizes documentation for more information.
<input type="checkbox" checked data-toggle="toggle" data-size="large">
<input type="checkbox" checked data-toggle="toggle" data-size="normal">
<input type="checkbox" checked data-toggle="toggle" data-size="small">
<input type="checkbox" checked data-toggle="toggle" data-size="mini">
Custom Sizes
Bootstrap toggle can handle custom sizes by data-width
and data-height
options.
<input type="checkbox" checked data-toggle="toggle" data-width="100" data-height="75">
<input type="checkbox" checked data-toggle="toggle" data-height="75">
<input type="checkbox" checked data-toggle="toggle" data-width="100">
Colors
Bootstrap Toggle supports various colors. Refer to Bootstrap Button Options documentation for more information.
<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="info">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="default">
Colors Mix
You can style on state as well as the off state.
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info">
Custom Style
Customized styles can be applied as easily.
<style>
.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; }
.toggle.ios .toggle-handle { border-radius: 20px; }
</style>
<input type="checkbox" checked data-toggle="toggle" data-style="ios">
<style>
.toggle.android { border-radius: 0px;}
.toggle.android .toggle-handle { border-radius: 0px; }
</style>
<input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info">
Custom Text
The text can be changed easily with attributes or options.
<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
Icons/Html Text
You can easily add icons or images since html is supported for on/off text.
<input type="checkbox" checked data-toggle="toggle" data-on="<i class='fa fa-play'></i> Play" data-off="<i class='fa fa-pause'></i> Pause">
Multiple Lines of Text
Toggles with multiple lines will adjust its heights.
World
World
<input type="checkbox" checked data-toggle="toggle" data-on="Hello<br>World" data-off="Goodbye<br>World">
Animation Speed
Transition speed can be easily controlled with css transition
property on .toggle-group
. You can also turn animation off completely.
<style>
.slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
.fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; }
.quick .toggle-group { transition: none; -webkit-transition: none; }
</style>
<input type="checkbox" checked data-toggle="toggle" data-style="slow">
<input type="checkbox" checked data-toggle="toggle" data-class="fast">
<input type="checkbox" checked data-toggle="toggle" data-style="quick">