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="https://code.jquery.com/jquery-3.4.0.min.js"></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.

$(document).ready(function(){
  
  $("#myCheckbox").sweetCheckbox();
  
  
});

Advance Configuration Options for HTML Toggle Switch

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

width

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

$("#myCheckbox").sweetCheckbox({
   width: 100,
});
height

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

$("#myCheckbox").sweetCheckbox({
   height: 50,
});
fontSize

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

$("#myCheckbox").sweetCheckbox({
   fontSize: '16px',
});
offText & onText

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

$("#myCheckbox").sweetCheckbox({
   offText: 'OFF',
   onText: 'ON',
});
wrapperClass

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

$("#myCheckbox").sweetCheckbox({
   wrapperClass: 'custom-class',
});
inputClass

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

$("#myCheckbox").sweetCheckbox({
   inputClass: 'class-name',
});
size

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

$("#myCheckbox").sweetCheckbox({
   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...