Enrolment Steps 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 admissions inbox or student information system: details holds the student's name, grade and date of birth, the interests, the entry term and the parent's name, email and phone. Show the confirmation when the request succeeds, and an error line in the form when it doesn't. The confirmation says only what the visitor sent; the reply time is the school's to publish.

Next checks the current step and opens the next one; an answer never advances on its own, so arrow keys can't skip a question. The rail's steps past the furthest one reached are unavailable until Next gets there, and any step already reached can be reopened from the rail, with Back, or from the review's Edit buttons. Whatever you typed stays. The panels keep one height (an unseen copy of all four sets it), so moving between steps never moves what is below. After a click, Next, Back or Edit, focus goes to the new step's heading and a polite status line says "Step 2 of 4"; nothing moves focus on load. Up and Down move along the rail.

The form has noValidate, so the block shows its own messages. Step one needs both names, a grade and a complete date of birth: the date must not be in the future and must give an age of about 10 to 19 (grades 6 to 12), measured against today when the visitor presses Next. Step two needs at least one interest. Step three needs the parent's name, an email with an @ and a domain, and a phone number of 7 to 15 digits. A problem appears under its field, the control gets aria-invalid and a description that points to it, and focus moves to the first one; sending from the review re-checks every step and reopens the first that fails. Typing clears a message, and leaving a filled field checks it.

It is the catalog Date Input: three segments (month, day, year) you type into or step with the arrow keys, with no calendar to open. It is the same Ark-built control on every base, so it behaves identically everywhere. The value is read once all three segments are filled; until then the step reports "Enter the date of birth". Going Back to the student keeps what was typed.

The label above the grade select names its button for screen readers, and focus lands on that button when the grade is missing. The select's trigger takes the id, and the label points to it with htmlFor. The interests are a multiple Toggle Group of pressed buttons. The chips allow three: a fourth press is ignored, and the line under them counts "3 of 3 chosen" and says to unpick one first.

Below lg the rail sits above the panel as a compact list that shows only each step's name (the one-line descriptions and the "have to hand" note appear from lg). The first and last names, the grade and date, the parent's email and phone go one per row below sm, and the entry term fills the width. The admissions details stack one per row. The email address wraps rather than scrolling, so nothing scrolls sideways at 320 pixels. The header and the frame fade up once on load; with reduced motion they simply appear. The email, phone and hours are fictional (.example is a reserved domain, 555-0100 to 0199 a reserved range): replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file.