Toggle Switch Checkbox

A toggle switch checkbox built with pure HTML and CSS that transforms a standard checkbox into a modern on/off switch. It enhances state clarity and interactive control feedback within responsive form interfaces.

Usage

Use this component when interfaces require binary toggle controls, such as feature activation, preference settings, notification controls, or configuration panels that benefit from clear on/off indicators.

Implementation

The effect is implemented using CSS :checked selectors combined with transform based sliding transitions, allowing the toggle handle to move smoothly between active and inactive states.

HTML

<label class="ss-toggle">
  <input type="checkbox">
  <span></span>
</label>

<label class="ss-toggle">
  <input type="checkbox">
  <span></span>
</label>

CSS

.ss-toggle{
  position:relative;
  width:44px;
  height:24px;
}

.ss-toggle input{
  display:none;
}

.ss-toggle span{
  position:absolute;
  inset:0;
  background:#cbd5e1;
  border-radius:999px;
  transition:.3s;
}

.ss-toggle span::before{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  background:#fff;
  border-radius:50%;
  top:3px;
  left:3px;
  transition:.3s;
}

.ss-toggle input:checked + span{
  background:#22c55e;
}

.ss-toggle input:checked + span::before{
  transform:translateX(20px);
}

.ss-toggle{
  position:relative;
  width:44px;
  height:24px;
}

.ss-toggle input{
  display:none;
}

.ss-toggle span{
  position:absolute;
  inset:0;
  background:#cbd5e1;
  border-radius:999px;
  transition:.3s;
}

.ss-toggle span::before{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  background:#fff;
  border-radius:50%;
  top:3px;
  left:3px;
  transition:.3s;
}

.ss-toggle input:checked + span{
  background:#22c55e;
}

.ss-toggle input:checked + span::before{
  transform:translateX(20px);
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses sliding toggle switch styling
• Enhances on/off state visibility
• Fully responsive across breakpoints
• Suitable for settings and configuration panels
• Easy to customize toggle size and colors

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.