# Bootstrap Toggle Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles. Visit http://www.bootstraptoggle.com for demos. ## Getting Started ### Installation You can [download](https://github.com/minhur/bootstrap-toggle/archive/master.zip) 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 <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 ```bash bower install bootstrap-toggle ``` ## Usage ### Basic example Simply add `data-toggle="toggle"` to convert checkboxes into toggles. ```html <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. ```html <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. ```html <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. ```html <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"`. ```html <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`. 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 Methods can be used to control toggles directly. ```html <input id="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 ## 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. ```html <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. ```html <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> ``` ### Integration #### [KnockoutJS](http://knockoutjs.com) A binding for knockout is available here: [aAXEe/knockout-bootstrap-toggle](https://github.com/aAXEe/knockout-bootstrap-toggle) ## Demos Visit http://www.bootstraptoggle.com for demos.