shadcn.io is not affiliated with official shadcn/ui
Tick-Off Checklist Blog Block for React
A "before you start" checklist for a tutorial: six real checkboxes for tools and parts, struck through when ticked, with a count, a thin bar and a Reset.
Installation
Overview
A checklist block for React with Base UI, written for Solderby, an electronics blog's build guides. A start-aligned header sits over a status line ("3 of 6 ready"), a thin bar that fills as the reader ticks, a sentence on what is still to find and a ghost Reset button. Under them a band of six rows runs rail to rail: each is a checkbox with the item, one line on what to look for, a Tool or Part tag and the quantity. A ticked row is struck through and tinted, and the count says so in words when everything is ready. It's built from Checkbox, Field, Progress, Button and Guides. For the shopping list that opens a tutorial, a packing list or any set of things to gather before the work starts. Ticks live only in this page: nothing is saved.
FAQ
How do I change the items?
Edit ITEMS: each has an id, a name, a line of detail, a kind (Tool or Part) and a quantity. The total, the count in the status line, the bar and the "still to find" sentence all derive from the array, and START lists the ids ticked when the block first shows.
How is the count announced?
The status line is a polite live region, so a screen reader hears "4 of 6 ready" after each tick, and "All 6 ready. Time to build." at the end. The bar is decoration and is hidden from assistive technology, because the same numbers are in text.
What does Reset do?
It unticks every row. With nothing ticked it does nothing, but it stays focusable and is marked aria-disabled, so keyboard focus is never lost when the last tick goes.
Are the ticks saved?
No. They live in the page's state and are gone on reload. To keep them, store the ticked ids in localStorage under the post's slug and read them back into START.
Related
- Pro
Accordion Step By Step Blog
Tutorials and seriesA tutorial in five steps: a single-open accordion on a vertical rail, a Done button that ticks a step and opens the next, and a framed drawing of the open step.
- Pro
Checklist Style Changelog
Votes and sharingA "tried it" checklist of the six latest things a task board shipped: a real checkbox per feature with its version and day, a count in the header and a meter that fills as you tick.
- Pro
Sequential Milestone Checklist Features
Timelines and stepsA features section for a launch-readiness tool: five milestones in an accordion, each a grouped checklist of real checkboxes, with every milestone locked until the one before it is complete.
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.
- Pro
Reading Progress Blog
Reading toolsFour articles you have opened as rows that lead with a progress ring, then the title, the time left and a Continue link; the header counts how many are still in progress.
- 765Pro
Countdown Toggle Listicle Blog
Post listsA seven-item countdown with huge drawn numerals, prep-time and difficulty chips, and a Countdown / Count up toggle that reverses the list without moving the page.