HTML + CSSCheckboxes
Round to-do check
A round check fills in while a line crosses out the task and the text fades back.
Settings
16px
1x
Code
<label class="uv-ck2t"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Finish the design</span></label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Checkboxes
Where to use it
Made for to-do lists: the tasks in a project management app, a packing list for a trip or the steps of a recipe you tick off while cooking. The line slides across the text and the item fades, so what is left to do stands out on its own. A to-do checkbox with strike-through, in HTML and CSS.
It works best when every row has a short label. Long sentences that wrap onto two lines only get the line on the first one, so keep tasks brief or give the list a bit more width.