Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.
Visit http://www.bootstraptoggle.com for demos.
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.
<linkhref="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"><scriptsrc="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>bower install bootstrap-toggleSimply add data-toggle="toggle" to convert checkboxes into toggles.
<inputtype="checkbox" checkeddata-toggle="toggle">Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add data-toggle="toggle" to convert checkboxes into toggles.
<divclass="checkbox"><label><inputtype="checkbox" data-toggle="toggle">
Option one is enabled
</label></div><divclass="checkbox disabled"><label><inputtype="checkbox" disableddata-toggle="toggle">
Option two is disabled
</label></div>Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add data-toggle="toggle" to a convert checkboxes into toggles.
<labelclass="checkbox-inline"><inputtype="checkbox" checkeddata-toggle="toggle"> First
</label><labelclass="checkbox-inline"><inputtype="checkbox" data-toggle="toggle"> Second
</label><labelclass="checkbox-inline"><inputtype="checkbox" data-toggle="toggle"> Third
</label>Initialize toggles with id toggle-one with a single line of JavaScript.
<inputid="toggle-one" checkedtype="checkbox"><script>$(function(){$('#toggle-one').bootstrapToggle();})</script>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled".
<inputtype="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled"><inputtype="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. |
| 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. |
Methods can be used to control toggles directly.
<inputid="toggle-demo" type="checkbox" data-toggle="toggle">| 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 |
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.
<inputid="toggle-event" type="checkbox" data-toggle="toggle"><divid="console-event"></div><script>$(function(){$('#toggle-event').change(function(){$('#console-event').html('Toggle: '+$(this).prop('checked'))})})</script>This also means that using the API or Input to trigger events will work both ways.
<inputid="toggle-trigger" type="checkbox" data-toggle="toggle"><buttonclass="btn btn-success" onclick="toggleOn()">On by API</button><buttonclass="btn btn-danger" onclick="toggleOff()">Off by API</button><buttonclass="btn btn-success" onclick="toggleOnByInput()">On by Input</button><buttonclass="btn btn-danger" onclick="toggleOffByInput()">Off by Input</button><script>functiontoggleOn(){$('#toggle-trigger').bootstrapToggle('on')}functiontoggleOff(){$('#toggle-trigger').bootstrapToggle('off')}functiontoggleOnByInput(){$('#toggle-trigger').prop('checked',true).change()}functiontoggleOffByInput(){$('#toggle-trigger').prop('checked',false).change()}</script>A binding for knockout is available here: aAXEe/knockout-bootstrap-toggle
Visit http://www.bootstraptoggle.com for demos.