Live Checklist Onboarding Process Block for React

The weeks are WEEKS at the top of the file: each has a title, a tip from the buddy and tasks, each with an id and a label. The count, the bar and each week's "2 of 5" are computed from the list, so you can add a task or a week freely; keep the ids unique. START is the list of ids that are ticked on load: make it empty to start from zero.

No, on purpose, and the header says so. The ticks live in memory: they reset when you reload, and nothing is stored or sent. To keep them, store the done array in local storage or in your own backend and read it back into useState. Reset empties the list, it never un-saves anything.

Each week is a labelled section with an h3, and its tasks are a list of real checkboxes named by their text. The count is a polite status, so ticking a task announces the new total ("8 of 18 done"), and the bar is named with the same numbers. A ticked task's text is also struck through, but the checkbox's own state is what a screen reader reads.

The split stacks: the header, the count and the buddy first, then the four weeks as bands ruled from rail to rail, each week full width. The hint line under the bar is hidden on phones to save a line; the count and the bar stay. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the checkboxes and the divider move to the other side.

Yes. The ticks and the count work the same on every target; each target uses Base UI's own checkbox, so the keys and the roles are the ones your library gives. The only per-target difference in the code is the name of the event that reports a change.

The header and the weeks fade up once on load, and the bar's fill grows when you tick a task. With reduced motion the entrance is skipped and the bar jumps to its new length.