Offset Slide Checkbox

An offset slide checkbox built with pure HTML and CSS that visually transitions the toggle indicator with a sliding motion. It enhances state change visibility and interaction clarity within modern form controls.

Usage

Use this component when interfaces require animated checkbox feedback, such as settings panels, preference toggles, feature switches, or interactive form elements that benefit from clear visual transitions.

Implementation

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

HTML

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

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

CSS

.checkbox-slide {
  width: max-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 12px;
  color: #0E21A0;
  cursor: pointer;
}

.checkbox-slide input {
  display: none;
}

.checkbox-slide__box {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #e5e7eb;
  position: relative;
  flex-shrink: 0;
  transition: background 140ms ease;
}

.checkbox-slide__box::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;

  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  transition: transform 140ms ease;
}

.checkbox-slide input:checked + .checkbox-slide__box {
  background: #2563eb;
}

.checkbox-slide input:checked + .checkbox-slide__box::after {
  transform: translate(16px, -50%);
}

@media (prefers-color-scheme: dark) {
  .checkbox-slide {
    color: #f4f4f5;
  }

  .checkbox-slide__box {
    background: #3f3f46;
  }
}

.checkbox-slide {
  width: max-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 12px;
  color: #0E21A0;
  cursor: pointer;
}

.checkbox-slide input {
  display: none;
}

.checkbox-slide__box {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #e5e7eb;
  position: relative;
  flex-shrink: 0;
  transition: background 140ms ease;
}

.checkbox-slide__box::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;

  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  transition: transform 140ms ease;
}

.checkbox-slide input:checked + .checkbox-slide__box {
  background: #2563eb;
}

.checkbox-slide input:checked + .checkbox-slide__box::after {
  transform: translate(16px, -50%);
}

@media (prefers-color-scheme: dark) {
  .checkbox-slide {
    color: #f4f4f5;
  }

  .checkbox-slide__box {
    background: #3f3f46;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses transform based slide animation
• Enhances checkbox state visibility
• Fully responsive across breakpoints
• Suitable for forms and settings panels
• Easy to customize slide distance 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.