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: January 12, 2024
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',

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link