Checkbox Generator
Design custom checkboxes with size, radius, border width and colours. Animated check, clickable preview, copy the CSS.
Click to toggle
.check { position: relative; width: 24px; height: 24px; cursor: pointer; }
.check input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.check .box {
width: 100%; height: 100%; border-radius: 6px;
border: 2px solid #3a4050; background: transparent;
transition: all .2s ease; display: flex; align-items: center; justify-content: center;
}
.check input:checked + .box { background: #6d5efc; border-color: #6d5efc; }
.check .box svg { stroke: #ffffff; opacity: 0; transition: opacity .2s; }
.check input:checked + .box svg { opacity: 1; }
<!-- HTML: <label class="check"><input type="checkbox" checked><span class="box"><svg viewBox="0 0 24 24" width="70%" fill="none" stroke-width="3"><path d="M5 12l5 5L20 6"/></svg></span></label> -->About the checkbox generator
Native checkboxes cannot be styled far, so the pattern is to hide the input, draw a styled box beside it, and use the :checked state to change that box. The input stays in the DOM so keyboard and form behaviour are untouched.
The tick itself is an inline SVG rather than a font character, which keeps it sharp at every size.
How to use it
- 1Set the size and corner radius. Around 6 pixels of radius suits most forms.
- 2Set the border width for the unchecked state.
- 3Pick checked, border and tick colours.
- 4Copy the CSS and HTML.
Questions
Why not use appearance: none on the input directly?
You can, and it works for simple cases. The sibling-span approach gives more control over the tick animation and is easier to keep consistent across browsers.
How do I show an indeterminate state?
Set the indeterminate property in JavaScript and style :indeterminate in CSS, usually with a dash instead of a tick.
Does the label need to be clickable?
Yes. Wrap the input in a label or link them with for and id, so clicking the text toggles the box. It roughly doubles the target size.