HTML Toggle Switch with Text – jQuery Sweet Checkbox

Sweet checkbox is a free jQuery plugin to create HTML toggle switch with text. It wrap standard HTML checkbox into div and style them just like on / off toggle button.

Plugin Overview

Plugin: Sweet Checkbox
Author: snowman0910
Licence: MIT Licence
Published: May 1, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version

File Type: zip archive (HTML & JavaScript)
Package Size: 4.52 KB

How to Use toggle switch with text:

1. Load the jQuery and Sweet Checkbox‘s JavaScript file into your page to getting started with toggle switch.

<!-- jQuery -->
<script src=""></script>

<!-- Sweet Checkbox Js -->
<script src="js/sweetCheckbox.js"></script>

2. After loading necessary assets, create input checkbox with a unique id that you want to convert into toggle switch with text.

<input name="checkbox" type="checkbox" id="myCheckbox">

3. Finally, initialize the plugin in jQuery document ready function to active the toggle switch.


Advance Configuration Options for HTML Toggle Switch

The following are some advance configuration options to create / customize “html toggle switch with text”.


This option define the height in pixels for the toggle button. Default: 60, Type: Number.

   width: 100,

Define the height in pixels for the toggle switch. Default: 22, Type: Number.

   height: 50,

Define the font size for the switch’s inner text. Default: ’12px’, Type: String.

   fontSize: '16px',
offText & onText

Text displayed when the checkbox is unchecked and checked. Default: OFF and ON respectively. Type: String.

   offText: 'OFF',
   onText: 'ON',

Set a class for the main wrapper of the checkbox. Type: String.

   wrapperClass: 'custom-class',

Add a class to the input that we target. Default: null, Type: String.

   inputClass: 'class-name',

This option useful to set the built-in size for toggle swich. Type: String.
Available Options are: ‘small’, ‘medium’, or ‘large’,

   size: 'medium',

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.