Bootstrap 4 Toggle
Bootstrap 4 Toggle is a bootstrap plugin/widget that converts checkboxes into toggles.
Library Distributions
Project | Description |
---|---|
bootstrap4-toggle | Supports bootstrap4 (requires jQuery) |
bootstrap-switch-button | Supports bootstrap4+ (ES6 class, no dependencies) |
bootstrap-switch-button-react | Supports bootstrap4+ (React component, no dependencies) |
Demos
Demos and API Docs: https://gitbrent.github.io/bootstrap4-toggle/
Table of Contents generated with DocToc
Installation
CDN
Download
NPM
npm install bootstrap4-toggle
Yarn
yarn add bootstrap4-toggle
Usage
Initialize With HTML
Simply add data-toggle="toggle"
to automatically convert a plain checkbox into a bootstrap 4 toggle.
Initialize With Code
Toggles can also be initialized via JavaScript code.
EX: Initialize id chkToggle
with a single line of JavaScript.
API
Options
- Options can be passed via data attributes or JavaScript
- For data attributes, append the option name to
data-
(ex:data-on="Enabled"
)
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: primary ,secondary ,success ,danger ,warning ,info ,light ,dark |
offstyle |
string | "light" | Style of the off toggle. Possible values are: primary ,secondary ,success ,danger ,warning ,info ,light ,dark |
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 auto-calculated. |
height |
integer | null | Sets the height of the toggle. if set to null, height will be auto-calculated. |
Methods
Methods can be used to control toggles directly.
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 on/off |
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.
API vs Input
This also means that using the API or Input to trigger events will work both ways.
On by APIOff by APIOn by InputOff by Input