Customizable Rounded & Square Toggle Switch Web Component

Preview:

Description:

The Toggle Switch Web Component provides an easy way to add iOS-style or square toggle switches to web pages.

It uses a hidden input to store the toggle’s state – ‘true’ when on and ‘false’ when off. This makes it easy to integrate with your existing forms and JavaScript logic.

How to use it:

1. Download the toggle-switch.js library and load it in your HTML document:

<script src='toggle-switch.js'></script>

2. To display a basic toggle switch, simply add the <toggle-switch /> element to your page:

<toggle-switch></toggle-switch>

3. Assign an ID, class, and name to the toggle switch. Note that the name attribute will also be passed to the hidden input to store the toggle state:

<toggle-switch
  id="example"
  class="my-switch"
  name="switch">
</toggle-switch>

4. The toggle switch can be customized with various attributes to control its size, appearance, and behavior:

• size: Sets the size of the toggle switch.
• height and width: Define the height and width of the switch.
• padding: Adds padding inside the switch.
• rounded: Controls whether the switch has rounded edges (true for rounded, false for square).
• transition-duration: Sets the speed of the toggle transition in milliseconds.
• unchecked-color, checked-color: Define the colors for the toggle in its on and off states.
• dot-color: Sets the color of the toggle button itself.

<toggle-switch
  size="30"
  height="60"
  width="30"
  padding="15"
  rounded="true"
  transition-duration="200"
  unchecked-color="#ccc"
  checked-color="#2196F3"
  dot-color="#fff"
></toggle-switch>

Changelog:

08/07/2025

• v1.0.0