Guides · · Maxwell Prehoda
11 Checkbox Animation Examples, From a 120ms Tick to a To-Do Strike-Through
A good checkbox animation is fast and honest: the tick appears in roughly 100 to 250ms, it comes from a real input that still works with the keyboard and screen readers, and it never hides the box when the CSS fails. The extra flourishes (a strike-through on a finished task, a bounce, a bloom) belong to to-do lists and habit trackers, where checking something off is the reward.
Below are the references people actually build from: TodoMVC's baseline, Stephanie Eckles' custom checkbox, Sara Soueidan's accessible SVG technique, the one-line accent-color fix, the W3C mixed-state pattern, Material's checkbox and the Tailwind approach, plus three of our own. Each says what it is best for, how it works, and the trap to avoid, and nearly every one has a live pure-CSS demo from our Checkboxes directory.
1. TodoMVC's completed task: Best for the baseline to-do list check and strike
Platform: Shared CSS used by 40+ framework demos
TodoMVC has shipped the same to-do app in dozens of frameworks since 2011, and its shared stylesheet is the most copied to-do checkbox there is. The real input is hidden with opacity 0 and laid over the label, which shows a grey circle as a background SVG; when checked, it swaps to a green circle with a tick. The task text turns grey and gets a line-through.
Read the CSS and you find the lesson: the label's color transitions over 0.4 seconds, but text-decoration can't animate, so the strike-through appears instantly. That mismatch is why so many to-do apps feel slightly flat at the moment of completion.
Our To-Do Checkbox with Strikethrough below fixes it: the box ticks, then a line draws through the task from left to right as one scaled ::after, and unchecking wipes it away.
Watch out for: Swapping a background image gives no animation at all for the tick. If you start from TodoMVC's CSS, replace the image swap with a drawn or scaled checkmark.
2. Stephanie Eckles' pure CSS custom checkbox: Best for a branded checkbox with no extra markup
Platform: Modern CSS Solutions (pure CSS)
Stephanie Eckles' article on Modern CSS Solutions is the cleanest custom checkbox technique on the web. `appearance: none` turns the input itself into the box, so it keeps focus, keyboard and form behavior. A ::before pseudo-element is shaped into a check with clip-path and scales from 0 to 1 over 120ms with a bottom-left transform origin, so the tick seems to check itself in.
It also covers the details most snippets skip: currentColor and em units so the box matches the label, an outline-based focus ring, a disabled state, and forced-colors support so the check still shows in Windows High Contrast Mode.
Our Pure CSS Custom Checkbox below uses the same appearance: none and clip-path approach, with a spring on the tick.
Watch out for: The article's transition has no prefers-reduced-motion guard. A 120ms scale is mild, but if you add bounce or overshoot, wrap it in a reduced-motion query.
3. Sara Soueidan's inclusive SVG checkboxes: Best for custom animated checkboxes that stay accessible
Platform: HTML, CSS and SVG (article)
If you draw your own checkbox in SVG, Sara Soueidan's 2020 article tells you how to hide the native input without breaking it. Don't use display: none, visibility: hidden or an off-screen sr-only class; touch screen reader users can't find those inputs. Instead, position the input absolutely over your SVG and set opacity to 0, so it stays in the accessibility tree and still receives taps and clicks.
With that in place, you are free to animate. She points to SVG line drawing for playful checkmarks, citing Codrops' 2013 animated checkbox experiments as proofs of concept that weren't built with accessibility in mind, and shows how to combine the two properly.
Our Animated Checkmark Checkbox below is that line-drawing pattern: the box floods with your accent and an SVG checkmark draws itself with stroke-dashoffset, then erases first when unchecked.
Watch out for: Style focus with a real outline on the SVG, not a box-shadow, so it survives forced-colors mode, as the article recommends.
4. accent-color on the native checkbox: Best for brand-colored checkboxes in one line of CSS
Platform: CSS property (MDN reference)
Sometimes you don't need a custom checkbox at all. The accent-color property tints native checkboxes, radio buttons, range sliders and progress bars with your brand color, and the browser keeps its own accessible states and contrast variations.
Add a small scale on hover and press and the native control feels responsive without any drawing. For admin panels, settings pages and long forms, that is often the best tradeoff: zero maintenance and native behavior everywhere.
Our Colored Checkbox with accent-color below shows it: accent-color for the color, em sizing for size, and a springy scale for feedback.
Watch out for: MDN currently labels accent-color as limited availability and notes that browsers may not use your exact color in every state. Test it in your target browsers and check contrast on the checked state.
5. W3C mixed-state checkbox: Best for select-all rows that control a group
Platform: WAI-ARIA Authoring Practices Guide
A select-all checkbox has three states, and the W3C's Authoring Practices Guide spells them out: checked, not checked, and partially checked, exposed as `aria-checked="mixed"`. Its mixed-state example uses one tri-state checkbox to reflect and control a group of normal checkboxes in a fieldset, the pattern you see in installers and email clients. Space toggles the focused checkbox.
The animation opportunity is the change between dash and check: as the last child is ticked, the parent's dash should turn into a check, so people see the group is complete.
Our Indeterminate Checkbox Group below animates exactly that: the parent shows a dash when some children are checked and a check when all are, with the dash folding away as the check draws in, using :has() to read the children.
Watch out for: CSS can draw the mixed look, but assistive technology only knows about it if you set the input's indeterminate property (or aria-checked="mixed") with a line of JavaScript. Do both.
6. Material Design checkbox: Best for Material-styled apps and dashboards
Platform: Material Web components (md-checkbox)
Google's Material Web component supports standalone, pre-checked and indeterminate checkboxes (set the `indeterminate` attribute), and it can be labeled by wrapping it in a label or pointing a label at its id. The Material look is a filled box with a tick and a soft circular state layer behind it on hover, focus and press.
That state layer is the part worth copying even outside Material. A halo larger than the box shows hover and focus clearly and gives the control a bigger visual target without changing layout.
Our Material Design Checkbox with Ripple below recreates it in plain CSS: a halo on hover, a ripple that spreads and fades on check, and a tick that draws across the filled box.
Watch out for: The Material Web docs also say checkboxes aren't automatically labeled by label elements and recommend an aria-label. Test with a screen reader before you ship.
7. Tailwind CSS peer checkboxes: Best for Tailwind projects that want a custom tick
Platform: Tailwind CSS (peer-* variants)
In Tailwind, custom checkboxes are usually built with the peer modifier: mark the input with `peer`, then style a following sibling with variants like `peer-checked:` and `peer-focus:`. Tailwind's docs note the peer marker only works on previous siblings, so the input must come before the icon in the markup.
A typical build is an appearance-none input as the box and an SVG check after it that fades and rises in with peer-checked, plus a transition utility for timing.
Our Tailwind CSS Checkbox below is that pattern, with the same checkbox written out in plain CSS on the second tab.
Watch out for: Long utility strings make the states easy to get wrong. Check the focus-visible and disabled states as carefully as checked, and extract a component once you use it twice.
8. LottieFiles checkbox animations: Best for native apps with designer-made checkmarks
Platform: Lottie JSON, GIF and MP4
In native iOS and Android apps, where CSS isn't an option, designers often ship checkbox animations as Lottie files. LottieFiles lists around ninety free checkbox animations from its community, from simple ticks to bouncy, colorful ones.
Play the file forward on check and jump straight to the unchecked frame on uncheck, so unchecking stays instant. Keep the animation short; a checkbox in a list may be tapped dozens of times in a row.
Watch out for: A Lottie checkbox is a picture, not a control. Keep the platform's real checkbox or toggle underneath for accessibility, and check each file's license and credit requirements.
9. Our To-Do Task Card: Best for task apps where completing is the reward
Platform: Motions directory, free, pure CSS Ours
A task card that completes in one gesture: a tint sweeps across the row, the round check squashes and bounces, the text slides aside and a Done pill pops in. Every piece reverses on uncheck.
This is the bigger version of TodoMVC's moment, for apps whose whole point is getting things done. The motion is still under a second, so checking off ten tasks in a row stays satisfying rather than slow.
Watch out for: If completed tasks move to another list, wait until the animation finishes (or let the user undo) before removing the row, or the reward is cut off.
10. Our Growing Plant Checkbox: Best for habit trackers and daily goals
Platform: Motions directory, free, pure CSS Ours
A sprout in a pot that grows when you tick the task: the stem stretches up, two leaves unfurl on a stagger and a flower blooms at the top. It is a gentle reward for things people do once a day, like drinking water, reading or a workout.
Habit apps live on small daily rewards, and a growing plant says "progress" more than a tick does. It is still a real checkbox underneath, so the state is accessible.
Watch out for: Characterful checkboxes need a clear unchecked state. Make sure an empty pot reads as "not done yet" at a glance, not as decoration.
11. Our Morphing Checkbox: Best for minimal designs where the box becomes the tick
Platform: Motions directory, free, pure CSS Ours
The box itself becomes the checkmark: two borders fade, the other two stretch into an L, and the whole shape rotates 45 degrees with a spring. Unchecking folds the tick back into a square.
Because nothing is added (no fill, no second shape), it suits minimal, monochrome interfaces where a filled box would feel heavy. The Checkboxes directory has 60 variations in all, from neon and pixel art to a cat paw.
Watch out for: Without a fill, the checked state relies on shape alone. Keep the stroke thick enough to read at small sizes, and test it at your smallest font size.
How to choose a checkbox animation
Match it to how often it is clicked
Forms, filters and settings get clicked constantly, so keep it native with accent-color or use a quick 100 to 150ms tick like Stephanie Eckles' 120ms scale. To-do lists and habit trackers can afford more: a strike-through, a bounce, a growing plant. Select-all rows need the mixed-state dash-to-check change from the W3C pattern.
Match it to your stack
Plain CSS: start from appearance: none (Modern CSS) or an opacity 0 input over an SVG (Sara Soueidan). Tailwind: peer-checked variants. Material apps: md-checkbox. Native mobile: platform controls with optional Lottie art. Every pattern above has a copy-paste version in our Checkboxes directory.
Keep the real input in charge
Whatever the animation, the native checkbox (or a correct ARIA equivalent) must keep focus, keyboard, form submission and screen reader state. Hide it with opacity, not display: none; show a visible focus ring; set indeterminate in JavaScript for mixed states; and respect prefers-reduced-motion. Our toggle switch guide covers when a switch fits better.
Upgrade your checkboxes this afternoon
Find the checkboxes in your product and sort them into two piles: utility (forms, filters, settings) and reward (tasks, goals). Give the utility pile accent-color or a fast custom tick. Give the reward pile one animation from this list that makes finishing feel good.
If you want a checkbox that matches your brand, describe it in the creator or paste your markup, and get production-ready CSS with focus, disabled and reduced-motion states included.
Make an animated to-do checkbox from a native input with appearance: none, CSS only. On check: the 20px rounded box fills with my accent color in 120ms, a white tick draws in over 180ms (stroke-dashoffset, ease-out), then a line strikes through the task label left to right in 250ms and the text fades to 60%. On uncheck: reverse everything in half the time. Visible :focus-visible outline, a disabled style, and forced-colors support. With prefers-reduced-motion, show the checked state instantly.
Common questions
How do I make an animated checkbox with only CSS?
Set appearance: none on the input so it becomes the box, draw the tick with a ::before pseudo-element (clip-path or borders), and transition its transform from scale(0) to scale(1) on :checked. Keep the real input so focus and keyboard still work. Our Pure CSS Custom Checkbox is a complete example.
How do you animate a strike-through on a to-do item?
text-decoration can't be animated, so draw the line yourself: add an ::after on the label, position it across the text, and transition transform: scaleX(0) to scaleX(1) from the left when the checkbox is checked. Our To-Do Checkbox with Strikethrough shows it.
How do I hide the default checkbox but keep it accessible?
Use appearance: none and style the input itself, or position the input over your custom graphic with opacity: 0. Avoid display: none, visibility: hidden and off-screen positioning, which make the input unreachable for touch screen reader users, as Sara Soueidan explains.
How long should a checkbox animation be?
Around 100 to 250ms for the tick. Stephanie Eckles' example uses 120ms. To-do apps can add a strike-through or a short celebration, but keep the whole thing under about a second so checking many items stays quick.
What is an indeterminate checkbox?
A third, partially checked state used by a parent checkbox when only some of its children are checked. It is exposed as aria-checked="mixed" (or the input's indeterminate property, which must be set in JavaScript) and usually drawn as a dash.