Checklist Widget Widget
Publish a moving, packing, house-viewing, document or onboarding checklist that visitors can actually tick. Progress shows as "7 of 12 done", and the ticks are remembered in the visitor's own browser - nothing is uploaded and no account is needed.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/checklist-widget" title="Checklist Widget by A2Z Tools" width="100%" height="920" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="checklist-widget" data-height="920"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
You write the list as plain lines: "## Section" starts a group and every other line is "item | optional note". Each item becomes a real checkbox whose label covers the whole row, so the tap target is at least 40 pixels high, and the note is linked to it with aria-describedby. A progress bar with progressbar semantics and a live text line report the count, for example 7 of 12 done, changing only when a box changes. Ticks are saved in localStorage under a key built from a 32-bit FNV-1a hash of the parsed list plus the item count, so blank lines, extra spaces and // comments do not reset anyone's progress, while rewording an item does - a ticked box can never jump to a different task. When a browser blocks storage inside embedded frames, the list still works and says that ticks will reset. Reset clears everything, Copy list produces plain text with [x] and [ ] marks, and Print hides the buttons. Up to 150 items.
Method
- Line format: "## Section" lines and "item | optional note" lines
- Progress = ticked items / all items, shown as "n of N done" and as a progressbar (aria-valuenow n, aria-valuemax N)
- Storage key = "a2z-checklist:" + FNV-1a-32(sections, items and notes after parsing) + ":" + item count
- Saved value = one character per item, 1 ticked and 0 not; a value of the wrong length or shape is ignored
Worked examples
Default moving checklist
Inputs: 3 sections, 12 items, nothing ticked yet
Result: 0 of 12 done; after ticking 7 boxes: 7 of 12 done (58%)
The bar fills to 7/12 = 58.3%, rounded to 58%.
Cosmetic edit keeps progress
Inputs: Same list re-saved with blank lines and a // comment added
Result: Same storage key, ticks restored
The key hashes the parsed items, not the raw text, so formatting does not reset anyone.
Limitations
- Ticks are per device and per browser; there is no syncing and no way for the publisher to see who ticked what.
- Browsers that block storage in third-party frames forget ticks when the page closes.
- Items cannot carry links or due dates - each is text plus an optional note.
Where publishers use it
- A removals firm's moving-house checklist from eight weeks out to key handover
- A travel agent's packing list for a beach holiday or a ski trip
- An estate agent's house-viewing checklist (damp, water pressure, broadband, parking) buyers tick on their phone
- A visa or mortgage broker's list of documents to gather before the appointment
- An HR page with a new-starter onboarding checklist for the first week
Questions
Where are the ticks saved?
Only in the visitor's own browser, in local storage for the A2Z frame. They are not sent to A2Z, to your website or to anyone else, and they stay on that one device: ticking on a phone does not tick the same list on a laptop. Clearing browsing data removes them. The widget shows Saved on this device only under the list so visitors know.
What happens to saved ticks when I edit the list?
The storage key is a hash of the parsed list, so changing an item's wording, a note, a section or the number of items gives a new key and everyone starts the edited list unticked. Purely cosmetic edits - blank lines, spacing around the | separator, Windows line endings, // comment lines - leave the key unchanged and keep progress.
Why do some visitors see that ticks will reset?
Some browsers, notably Safari and Firefox with strict tracking protection, block storage inside frames embedded from another site. The checklist still works for that visit; it simply cannot remember ticks after the page is closed, and it says so rather than pretending. Copy list or Print are the fallback for keeping a record.
What do Copy list and Print produce?
Copy list puts plain text on the clipboard: the heading, each section name, then every item as [x] or [ ] with its note after a dash, ending with a line such as 7 of 12 done - ready to paste into notes or an email. Print uses the browser's print dialog for the checklist frame with the buttons hidden, so a paper copy keeps the ticked boxes.
How long can a checklist be?
Up to 150 items in any number of sections; item text is capped at 300 characters and notes at 400. For a printable one-page list, 15 to 30 items in three or four sections is a practical size.
Is the progress bar accessible?
Yes. It is a progressbar with a minimum of 0, a maximum equal to the number of items and a text value such as 4 of 12 done; the visible count line is a polite live region that updates only when a box changes, so screen readers are not flooded.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Checklist Widget https://a2z.tools/embed/checklist-widget
<a href="https://a2z.tools/embed/checklist-widget">A2Z Tools Checklist Widget</a>
[A2Z Tools Checklist Widget](https://a2z.tools/embed/checklist-widget)
Checklist Widget by A2Z Tools - https://a2z.tools/embed/checklist-widget
Related widgets
-
Numbered How-it-works steps with drawn icons, or an order tracker that highlights the current step.
-
A vertical or sideways-scrolling timeline of dated milestones, with an optional Now marker.
-
Fundraising goal thermometer: amount raised, goal, percentage and days left, set in the builder.
-
A 25/5 focus timer with long breaks, cycle counter and pause, skip and reset - every length editable.
-
Accessible FAQ accordion with search, expand-all, numbering and a copy-as-text button.
-
Photo grid, masonry columns or a sideways strip with a keyboard-friendly lightbox and alt-text checks.