### Made for Bootstrap 4!

###### This page and all of the switch buttons shown are running on Bootstrap 4.3

Supports touch events
Supports outline colors
Includes a mini (-xs) size

## Installation

### CDN

`<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>`

### Download

GitHub Latest release

### NPM

`npm install bootstrap4-toggle`

### Yarn

`yarn add bootstrap4-toggle`

## Demos

### Sizes

Bootstrap toggle is available in different sizes.

### Custom Sizes

Bootstrap toggle can handle custom sizes by `data-width` and `data-height` options.

### Colors

Bootstrap Toggle implements all standard bootstrap 4 button colors.

### Outline Colors

Bootstrap Toggle implements all standard bootstrap 4 button outline colors.

### Dark Theme Colors

Bootstrap Toggle colors look great on dark backgrounds.

### Dark Theme Outline Colors

Bootstrap Toggle outline colors look great on dark backgrounds.

### Custom Style

Style the buttons to fit an existing UX.

### Custom Text

The text can be changed easily with attributes or options.

### HTML, Icons, Images

You can easily add icons or images since html is supported for on/off text.

### Multiple Lines of Text

Toggles with multiple lines will adjust its heights.

### Animation Speed

Transition speed can be easily controlled with css `transition` property on `.toggle-group`. You can also turn animation off completely.

### Stacked checkboxes

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

Enabled
Disabled

### Inline Checkboxes

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

Enabled
Disabled

## Usage

### Initialize with HTML

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

### Initialize with JavaScript

Simply call the `bootstrapToggle` method to convert checkboxes into toggles. See Options for additional colors, etc.

## API

### Options

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

Name | Type | Default | Description
--- | --- | --- | ---
`on` | string | html | `"On"` | Text of the on toggle label.
`off` | string | html | `"Off"` | Text of the off toggle label.
`onstyle` | string | `"primary"` | Style of the on toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` Refer to Bootstrap Button Options documentation for more information.
`offstyle` | string | `"light"` | Style of the off toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` Refer to Bootstrap Button Options documentation for more information.
`size``` | string | null | Size of the toggle. If set to null, button is default/normal size. Possible values are: `lg`, `sm`, `xs` Refer to Bootstrap Button Sizes documentation for more information.
`style` | string | null | Appends the provided value to the toggle's class attribute. Use this to apply custom styles to the toggle.
`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.

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 |

### Checked State

You can determine the checked state of a toggle using the `checked` property.

Use the element property for checked state
`document.getElementById('toggle-state').checked`
Returns true/false

## Events

### Event Propagation

Notes
• All events are propagated to and from input element to the toggle.
• Listen for events on the `<input type="checkbox">` directly as the toggle stays synced with the input.

### Stopping Event Propagation

Passing `true` to the on/off methods will enable the silent option to prevent the control from propagating the change event in cases where you want to update the controls on/off state, but do not want to fire the onChange event.

### API vs Input

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