This checkbox uses a horizontal sliding fill to indicate state change, providing clear motion feedback without icons or checkmarks.
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
- State communicated through motion
- No icons or symbols required
- Ideal for preference toggles
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.