A sliding fill checkbox built with pure HTML and CSS that animates the selection state using a sliding fill effect across the checkbox container. It enhances visual state clarity and interaction feedback within modern form controls.
Usage
Use this component when interfaces require animated checkbox feedback, such as settings toggles, feature selectors, task lists, or preference panels that benefit from smooth selection transitions.
Implementation
The effect is implemented using CSS :checked selectors combined with transform and background transition techniques, allowing a fill element to slide across the checkbox surface when activated.
HTML
<label class="check-slide">
<input type="checkbox" />
<span class="check-slide__box"></span>
<span class="check-slide__label">Enable</span>
</label>CSS
.check-slide {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
font-family: system-ui, -apple-system, sans-serif;
}
.check-slide input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.check-slide__box {
width: 36px;
height: 20px;
border-radius: 999px;
background: #e5e7eb;
position: relative;
transition: background 200ms ease;
}
.check-slide__box::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 200ms ease;
}
.check-slide input:checked + .check-slide__box {
background: #6366f1;
}
.check-slide input:checked + .check-slide__box::after {
transform: translateX(16px);
}
.check-slide__label {
font-size: 14px;
font-weight: 500;
color: #BC6FF1;
}
.check-slide input:focus-visible + .check-slide__box {
outline: 2px solid #6366f1;
outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
.check-slide__box {
background: #1e293b;
}
.check-slide__box::after {
background: #020617;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.check-slide input:checked + .check-slide__box {
background: #4f46e5;
}
.check-slide__label {
color: #BC6FF1;
}
.check-slide input:focus-visible + .check-slide__box {
outline-color: #818cf8;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses sliding fill animation styling
- Enhances checkbox state visibility
- Fully responsive across breakpoints
- Suitable for forms and task interfaces
- Easy to customize fill color and animation speed
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.