Eligibility Capture CTA Block for React

Two patterns at the top of the file. COMPLETE recognises an address that looks finished (something, an @, a domain and a suffix), so the line doesn't scold while someone is still typing. SCHOOL then tests the domain: it must end in .edu, or in .ac. followed by a two-letter country code, and subdomains such as cs.university.edu pass. Change SCHOOL to match your program: a list of partner domains, a company suffix, or a call to your own endpoint.

No. It only reads the text of the address in the browser, which anyone can fake, and the line under the button says so honestly: "We only look at the part after the @". The confirmation sends a link to the address, so the real proof is that the visitor opens it. Do the verification on your server, with an inbox link or a verification service, and treat this block as the front door.

A disabled button leaves the tab order and can't carry a description for a screen reader. This one stays focusable and is marked aria-disabled, with aria-describedby pointing at the status line, so a keyboard or screen-reader user reaches it and hears why it can't be pressed yet. It looks faded and ignores pointer presses. Pressing Enter in the field while the address doesn't qualify does nothing but return focus to the field, because the line already says what's wrong.

The field's name is "School email". The line under it is a polite status region, so it speaks when its message changes, to "Student address recognised" or "That isn't a school address", and not on every key: an unfinished address keeps the neutral message. The icon beside it is decorative. After a successful submit, focus moves to the confirmation so it is read from its start.

The request is simulated in submit: when the address qualifies, phase goes to "sending", the button shows its spinner and the field turns read-only, and a timer (LATENCY, 0.9 seconds) sets it to "done". Replace the timer with your request, set "done" when it succeeds, and on failure return to "idle" and show the reason in the status line. The timer is cleared when the block unmounts, so cancel a real request there too.

Below lg the copy comes first and the form panel stacks under it, with a rule between them. The field, the status line and the button always stack, the status line reserves three lines on a phone (two from sm) so the block doesn't jump when its message gets longer, and a long address in the confirmation breaks anywhere instead of pushing the panel wider than the screen.