Eligibility Checklist Scholarship Contact Block for React

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 a call to your application system: details (name, email, essay) and ticked (the criteria the applicant confirmed) hold everything. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

Edit CRITERIA at the top of the file: each entry is a title, a detail and an id. The verdict line, the "N of N criteria met" count and the gate on the button all follow the length of the list, so four can become three or five. The fund, the $4,000 award and its rules are made up and marked as an example in the header.

The button uses aria-disabled rather than disabled, so it stays in the tab order and a screen reader can reach it and hear why ("Tick all four criteria to apply"). Pressing it while a criterion is missing does not send anything: it shows the problem under the list and moves focus to the first unticked box. Everything else (a short essay, a missing email) is reported in the same pass, in the order it appears on the page.

The text is trimmed and split on whitespace, so a run of spaces or a line break counts once. The bar is Progress with a maximum of 500 and a tick at 250; under 250 the count reads "N more to reach 250", from 250 to 500 it reads "Within the range" with a success dot, and over 500 it says by how many. The count is linked to the text area with aria-describedby, so it is read when the field is focused, not on every keystroke. Change MIN_WORDS and MAX_WORDS to suit your rules; the tick is placed from them.

Each row's title is the box's name and its detail line the box's description. The row's label points at the box with htmlFor and the box has an id, so clicking anywhere in the row ticks it.

The panel is one column: the criteria and the verdict, then a rule, then the essay, the name, the email and the button full width. Nothing scrolls sideways at 320 pixels. The header and the card fade up once on load; with reduced motion they simply appear.