HTML + CSSCheckboxes

Markdown task checkbox

A code editor line where the empty brackets turn into [x] and the text gets wrapped in ~~ strikethrough marks.

Settings

16px
1x

Code

<label class="uvq02-md"><input type="checkbox"><span class="ln" aria-hidden="true">12</span><span class="cd"><span class="mk" aria-hidden="true">- [<span class="x"><i>x</i></span>]</span> <span class="st" aria-hidden="true">~~</span><span class="tx">Release version 2.0</span><span class="st" aria-hidden="true">~~</span></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.

Markdown version with all the code, for AI assistants

More in Checkboxes

See all Checkboxes

Where to use it

Made for developers, this checkbox looks like a line in a dark code editor, with a line number, a Markdown list dash and square brackets. Checking it types an x between the brackets, adds the ~~ strikethrough markers around the text in two steps and greys the task out. A block cursor blinks on hover and focus. It suits changelogs, dev tools, documentation and README-style task lists.

The main color is the x and the cursor, the secondary color the brackets, like a syntax theme. Change the line number and font to match your editor, and stack several lines for a release checklist.