Task Checkbox

A checkbox that fills with its accent, pops its tick and strikes its label through.

About this tool

A square outline that floods with the accent the moment it is checked, while the tick springs past its resting size before settling and a ring expands out of the box and fades. The label dims and a rule is drawn across it left to right, so a completed task reads as done from across the room. Duration, overshoot and ripple are sliders and the strike can be switched off, so the same component covers a playful to-do list and a restrained settings row. Every length is a ratio of the box, so it holds from a dense list up to a hero.

In collections: Custom CSS Checkboxes & Radio Buttons

UI/UX · HTML / CSS All tools

Label

Text

Layout

Size %

State

auto done todo

Style

Tone

ink paper

Accent

#ffffff

Corner %

Motion

Duration ms

Overshoot ×

Ripple ×

Strike

on off