Document Checklist Contact Block for React

Each document in DOCS lists the ways of filing that need it: a pay summary for an employee, client payment summaries and expense receipts for the self-employed, a pension statement for the retired, and bank interest, last year's return and a photo ID for all three. The count and the bar only look at the needed ones, so a ticked optional document is kept but does not move the bar. The lists are made up for the demonstration and the button's note says they are not tax advice.

It lets the form send with documents missing. With it off, submitting shows "Tick the 3 documents still missing, or switch on “I'll send the rest later”." under the checklist and moves focus to the first box. With it on, the confirmation says how many were ready and that the rest will follow by email.

Every checkbox is named by its document, and a tag is read after it ("Needed" or "Optional"). The bar is a picture of the count beside it, so it is hidden from assistive technology. When you tick a document or change the way you file, one hidden status line says the new count, such as "3 of 5 needed documents ready".

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks the documents (unless the rest will follow), a name and an email address with an @ and a domain. Each problem appears under its field with an icon and focus moves to the first one. Leaving a filled field checks it, and editing a field that shows an error re-checks it as you type.

Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the way of filing, the documents ticked, the switch, the name and the email. The confirmation repeats the way of filing and the count and says an accountant will write to the address given; it promises nothing else.

Everything is one column. The three choice cards stack, each checklist row wraps its name and keeps its tag at the end, and the count and the bar stay above the list. Name and email go one per row and the button goes full width.