CSS Only Interactive Toggle Switches – toggle-switch.css

Preview:

Description:

The toggle-switch.css transforms the regular checkbox element into interactive toggle switches using pure CSS/CSS3.

See also:

• 10 Best Toggle Switch JavaScript And CSS Libraries
• 10 Best Checkbox And Radio Input Replacement Libraries
• 10 Best Toggle Switch jQuery Plugins

How to use it:

Install & Download.

# Yarn
$ yarn add toggle-switch-css
# NPM
$ npm install toggle-switch-css --save

Import the stylesheet toggle-switch.css into the document.

<link rel="stylesheet" href="./src/toggle-switch.css">

The HTML to create a default toggle switch.

<label class="toggle-switch">
  <input type="checkbox" id="toggle-switch-input" class="toggle-switch-input"/>
  <label for="toggle-switch-input" class="toggle-switch-label"></label>
  Default
</label>

Set the toggle switch to Disabled.

<label class="toggle-switch disabled">
  <input type="checkbox" id="toggle-switch-input" class="toggle-switch-input"/>
  <label for="toggle-switch-input" class="toggle-switch-label"></label>
  Default
</label>

Customize the toggle switch by overriding the default variables.

.toggle-switch {
  --bar-height: 14px;
  --bar-width: 32px;
  --bar-color: #eee;
  --knob-size: 20px;
  --knob-color: #fff;
  --switch-offset: calc(var(--knob-size) - var(--bar-height));
  --switch-width: calc(var(--bar-width) + var(--switch-offset));
  --transition-duration: 200ms;
  --switch-transition: all var(--transition-duration) ease-in-out;
  --switch-theme-rgb: 26, 115, 232;
  --switch-theme-color: rgb(var(--switch-theme-rgb));
  --switch-box-shadow: 0 0 var(--switch-offset) #11111180;
  --switch-margin: 8px;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--bar-height);
  min-width: var(--bar-width);
  margin: var(--switch-margin);
  user-select: none;
}

Changelog:

03/31/2023

• Update

v1.0.3 (10/22/2020)

• fix: layout in iOS 10

v1.0.2 (07/18/2020)

• CSS updated