Checkbox Draw
A checkbox with an animated draw-in checkmark that fills and draws its path when toggled. Perfect for to-do lists, settings panels, or any form where a satisfying check interaction adds polish.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
checkboxdrawchecksvgform
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A checkbox with an animated draw-in checkmark for satisfying form interactions.
CSS
css
.cb { width: 24px; height: 24px; border: 2px solid #71717a; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; }
.cb.checked { border-color: #3b82f6; background: #3b82f6; }
.cb path { stroke: #fff; stroke-width: 2; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.3s ease-out; }
.cb.checked path { stroke-dashoffset: 0; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="cb" onclick="this.classList.toggle('checked')"><svg width="14" height="14" viewBox="0 0 24 24"><path d="M5 12l5 5 9-9"/></svg></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.cb { width: 24px; height: 24px; border: 2px solid #71717a; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; }
.cb.checked { border-color: #3b82f6; background: #3b82f6; }
.cb path { stroke: #fff; stroke-width: 2; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.3s ease-out; }
.cb.checked path { stroke-dashoffset: 0; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<div class="cb" onclick="this.classList.toggle('checked')"><svg width="14" height="14" viewBox="0 0 24 24"><path d="M5 12l5 5 9-9"/></svg></div>
</body></html>