Magnetic Checkbox
The checkbox box subtly shifts toward the cursor on hover using JS-driven translate.
Magnetic Checkbox the 20th of 23 designs in the 23 CSS Checkboxes collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<label class="cb-magnet">
<input class="cb-magnet__input" type="checkbox" checked />
<span class="cb-magnet__box">
<svg width="12" height="9" viewBox="0 0 14 11" fill="none">
<polyline
points="1,5.5 5,9.5 13,1"
stroke="white"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
<span>Magnetic checkbox</span>
</label> .cb-magnet {
display: inline-flex; align-items: center;
gap: 10px; cursor: pointer; user-select: none;
}
.cb-magnet__input { display: none; }
.cb-magnet__box {
width: 26px; height: 26px; border-radius: 8px;
border: 2px solid rgba(124,108,255,.4);
display: flex; align-items: center;
justify-content: center; color: transparent;
transition: background .25s, border-color .25s,
color .25s;
will-change: transform;
}
.cb-magnet__input:checked + .cb-magnet__box {
background: #7c6cff; border-color: #7c6cff;
color: #fff;
} document.querySelectorAll('.cb-magnet__box').forEach(function(box) {
box.addEventListener('mousemove', function(e) {
var r = box.getBoundingClientRect();
var x = (e.clientX - r.left - r.width / 2) * 0.3;
var y = (e.clientY - r.top - r.height / 2) * 0.3;
box.style.transform = 'translate(' + x + 'px,' + y + 'px)';
});
box.addEventListener('mouseleave', function() {
box.style.transform = '';
});
});