Bootstrap 5 Toggle

Bootstrap 5 Toggle is a bootstrap plugin/widget that converts checkboxes into toggles.

Library Distributions

| Version | Bootstrap Support | Last Release | End of Life | | :----------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | v5 | | | | | v4 | | | | | v3 | | | |

See EOL for each version in Security Policy Page.

Demo and documentation

Please read our documentation page for a completed usage explanation: https://palcarazm.github.io/bootstrap5-toggle/

Installation

CDN

ECMAS Interface

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@#version#/css/bootstrap5-toggle.min.css"
  rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@#version#/js/bootstrap5-toggle.ecmas.min.js"></script>

jQuery Interface

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@#version#/css/bootstrap5-toggle.min.css"
  rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@#version#/js/bootstrap5-toggle.jquery.min.js"></script>

Download

NPM

npm install bootstrap5-toggle@#version#

Yarn

yarn add bootstrap5-toggle@#version#

Usage

Initialize With HTML

Add data-toggle="toggle" to automatically convert a plain checkbox into a bootstrap 5 toggle.

<input id="chkToggle" type="checkbox" data-toggle="toggle" />

Initialize With Code

Toggles can also be initialized via JavaScript code.

EX: Initialize id chkToggle with a single line of JavaScript.

<input id="chkToggle" type="checkbox" checked />
<script>
  document.querySelector("#chkToggle").bootstrapToggle();
</script>

Collaborators welcome!

• :sos: Do you need some help? Open a thread in GitHub Discussions Q&A
• :bug: Do you find a bug? Open an issue in GitHub bug report
• :bulb: Do you have a great idea? Open an issue in GitHub feature request
• :computer: Do you know how to fix a bug? Open a pull request in GitHub pull request.

¿Do you like the project? Give us a :star: in GitHub.