Sequential Milestone Checklist Features Block for React

Edit the five milestone objects at the top of the file. Each has a name, a sentence and six requirements, each with a group (Legal, Security or Support), an id and a label. The counts, the percentage in the ring, "of 5 milestones complete" and each chip are all worked out from what is ticked, so they can't drift. START lists what is ticked when the page loads; clear it to start from nothing.

A milestone is open to work on while every milestone before it is complete. A locked row still sits in the list and can be reached from the keyboard, but it won't open, and its text says what it waits for ("Locked until Private beta is complete"). If you untick a box in an earlier milestone, every milestone after it locks again, and an open one gives way to the first milestone still to do. Ticking the last box of a milestone doesn't open the next one on its own; you choose when.

Each row is a heading with its name, how many requirements are ticked (or what it waits for) and its state. Each checkbox is named by its requirement, and the three groups are fieldsets with legends. A polite status says when a milestone completes and which one unlocks, or when one stops being complete.

Tab moves through the rows and into the open milestone's checkboxes; Space ticks a box, and Enter or Space on a row opens it. The arrow keys, Home and End also move between rows on most versions; the Base UI and React Aria versions use Tab between rows instead.

The header sits above the list, the state chip drops away (each row keeps its count or lock line), and the three groups stack in one column. Nothing scrolls the page sideways at 320 pixels.

The header and the list fade up once on load, the ring sweeps to its new value, the count rolls and a panel opens with a short height change. With reduced motion those are off and everything changes at once.