Customizable Rounded & Square Toggle Switch Web Component

Authorlullaby6

Last UpdateAugust 7, 2025

LicenseMIT

How to use it:

1. Load the toggle-switch.js file in your HTML document.

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

2. Insert the <toggle-switch> custom element.

<toggle-switch></toggle-switch>

3. Set name when the hidden input needs a field name.

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

Rounded and Square Toggle Switches:

Set rounded="true" for rounded corners or rounded="false" for a square switch.

<!-- Rounded switch -->
<toggle-switch rounded="true"></toggle-switch>
<!-- Square switch -->
<toggle-switch rounded="false"></toggle-switch>

Customization Attributes:

Attribute	Description
`name`	Sets the name copied to the hidden input that stores the switch state.
`size`	Sets the size of the toggle switch.
`height`	Sets the switch height.
`width`	Sets the switch width.
`padding`	Sets the internal padding.
`rounded`	Uses rounded corners when set to `true` and square corners when set to `false`.
`transition-duration`	Sets the toggle transition duration in milliseconds.
`unchecked-color`	Sets the color for the unchecked state.
`checked-color`	Sets the color for the checked state.
`dot-color`	Sets the switch dot color.

Full Customization Example:

<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>

Alternatives & Related Resources:

slider.css – CSS toggle controls based on radio buttons, with two-state and three-state configurations.
Toggle Switchy – Pure CSS checkbox switches with rounded and square styles, sizes, colors, and labels.
simple-switch – JavaScript toggle switches built from regular checkbox inputs with iOS and Material Design styles.
10 Best Toggle Switch JavaScript And CSS Libraries – A collection of JavaScript and CSS switch implementations.

Changelog:

08/07/2025

v1.0.0