https://github.com/gitbrent/bootstrap4-toggle
Bootstrap 4 Switch Button / Toggle
https://github.com/gitbrent/bootstrap4-toggle
bootstrap bootstrap-4 bootstrap-widget bootstrap4 bootstrap4-checkbox bootstrap4-switch bootstrap4-switch-button
Last synced: 4 months ago
JSON representation
Bootstrap 4 Switch Button / Toggle
- Host: GitHub
- URL: https://github.com/gitbrent/bootstrap4-toggle
- Owner: gitbrent
- License: mit
- Fork: true (minhur/bootstrap-toggle)
- Created: 2018-10-18T02:08:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T10:09:21.000Z (almost 3 years ago)
- Last Synced: 2025-01-15T22:29:31.452Z (about 1 year ago)
- Topics: bootstrap, bootstrap-4, bootstrap-widget, bootstrap4, bootstrap4-checkbox, bootstrap4-switch, bootstrap4-switch-button
- Language: HTML
- Homepage: https://gitbrent.github.io/bootstrap4-toggle/
- Size: 1.63 MB
- Stars: 212
- Watchers: 9
- Forks: 67
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://opensource.org/licenses/mit-license.php) [](https://getbootstrap.com/docs/4.1) [](https://snyk.io/test/npm/bootstrap4-toggle) [](https://www.npmjs.com/package/bootstrap4-toggle) [](https://www.jsdelivr.com/package/gh/gitbrent/bootstrap4-toggle)
# Bootstrap 4 Toggle
**Bootstrap 4 Toggle** is a bootstrap plugin/widget that converts checkboxes into toggles.
**************************************************************************************************
#### Library Distributions
Project |Description
-------------------------------------------------------------------------------------------|-------------------------------------------------------
[bootstrap4-toggle](https://github.com/gitbrent/bootstrap4-toggle) | Supports bootstrap4 (requires jQuery)
[bootstrap-switch-button](https://github.com/gitbrent/bootstrap-switch-button) | Supports bootstrap4+ (ES6 class, no dependencies)
[bootstrap-switch-button-react](https://github.com/gitbrent/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](https://github.com/thlorenz/doctoc)*
- [Installation](#installation)
- [CDN](#cdn)
- [Download](#download)
- [NPM](#npm)
- [Yarn](#yarn)
- [Usage](#usage)
- [Initialize With HTML](#initialize-with-html)
- [Initialize With Code](#initialize-with-code)
- [API](#api)
- [Options](#options)
- [Methods](#methods)
- [Events](#events)
- [Event Propagation](#event-propagation)
- [Stopping Event Propagation](#stopping-event-propagation)
- [API vs Input](#api-vs-input)
**************************************************************************************************
# Installation
## CDN
```html
```
## Download
[Latest GitHub Release](https://github.com/gitbrent/bootstrap4-toggle/releases/latest)
## NPM
```ksh
npm install bootstrap4-toggle
```
## Yarn
```ksh
yarn add bootstrap4-toggle
```
# Usage
## Initialize With HTML
Simply add `data-toggle="toggle"` to automatically convert a plain checkbox into a bootstrap 4 toggle.
```html
```
## Initialize With Code
Toggles can also be initialized via JavaScript code.
EX: Initialize id `chkToggle` with a single line of JavaScript.
```html
$(function(){
$('#chkToggle').bootstrapToggle();
});
```
# API
## Options
* Options can be passed via data attributes or JavaScript
* For data attributes, append the option name to `data-` (ex: `data-on="Enabled"`)
```html
$(function() {
$('#toggle-two').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
})
```
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.
```html
```
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 `` directly rather than look for custom events.
```html
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
```
## 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.
```html
On by API (silent)
Off by API (silent)
On by API (not silent)
On by API (not silent)
function toggleApiOnSilent() {
$('#toggle-silent').bootstrapToggle('on', true);
}
function toggleApiOffSilent() {
$('#toggle-silent').bootstrapToggle('off', true);
}
function toggleApiOnNotSilent() {
$('#toggle-silent').bootstrapToggle('on');
}
function toggleApiOffNotSilent() {
$('#toggle-silent').bootstrapToggle('off');
}
```
## API vs Input
This also means that using the API or Input to trigger events will work both ways.
```html
On by API
Off by API
On by Input
Off by Input
function toggleApiOn() {
$('#toggle-trigger').bootstrapToggle('on')
}
function toggleApiOff() {
$('#toggle-trigger').bootstrapToggle('off')
}
function toggleInpOn() {
$('#toggle-trigger').prop('checked', true).change()
}
function toggleInpOff() {
$('#toggle-trigger').prop('checked', false).change()
}
```