Sliding Check Toggle

A sliding check toggle built with pure HTML and CSS that transitions the checkbox indicator with a horizontal sliding motion. It enhances state change visibility and modern toggle interaction clarity within form interfaces.

Usage

Use this component when interfaces require switch style checkbox controls, such as settings panels, feature toggles, preference options, or configuration dashboards 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 inactive and active positions.

HTML

<label class="check-slide">
  <input type="checkbox">
  <span class="check-slide__box"></span>
</label>

<label class="check-slide">
  <input type="checkbox">
  <span class="check-slide__box"></span>
</label>

CSS

.check-slide {
  width: 200px;
  display: flex;
  justify-content: center;
}

.check-slide input {
  display: none;
}

.check-slide__box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #f3f4f6;
  position: relative;
  cursor: pointer;
  transition: background 150ms ease;
}

.check-slide__box::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  background: #6366f1;
  transform: translateX(-120%);
  transition: transform 180ms ease;
}

.check-slide input:checked + .check-slide__box {
  background: #eef2ff;
}

.check-slide input:checked + .check-slide__box::after {
  transform: translateX(0);
}

@media (prefers-color-scheme: dark) {
  .check-slide__box {
    background: #020617;
  }
  .check-slide input:checked + .check-slide__box {
    background: #1e1b4b;
  }
}

.check-slide {
  width: 200px;
  display: flex;
  justify-content: center;
}

.check-slide input {
  display: none;
}

.check-slide__box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #f3f4f6;
  position: relative;
  cursor: pointer;
  transition: background 150ms ease;
}

.check-slide__box::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  background: #6366f1;
  transform: translateX(-120%);
  transition: transform 180ms ease;
}

.check-slide input:checked + .check-slide__box {
  background: #eef2ff;
}

.check-slide input:checked + .check-slide__box::after {
  transform: translateX(0);
}

@media (prefers-color-scheme: dark) {
  .check-slide__box {
    background: #020617;
  }
  .check-slide input:checked + .check-slide__box {
    background: #1e1b4b;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses transform based toggle animation
• Enhances checkbox state clarity
• Fully responsive across breakpoints
• Suitable for forms and settings interfaces
• Easy to customize toggle size and color

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.