Conference ticket steppers Contact Block for React

The order holds eight tickets across the three tiers. Each stepper's maximum is eight minus the other two tiers, so one tier can take the whole order and the others stop at zero. Typing a higher number snaps back to the room that's left. The line under the list is that sum, written as "N of 8 tickets". The total is each tier's count times its price.

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 three counts, the name, the email and the meal. The confirmation lists only the tiers with at least one ticket, then the total from those same prices. It doesn't invent a confirmation number.

The form has noValidate. On submit it requires at least one ticket and rejects a sum over eight, then a name, an email address with an @ and a domain, and a meal. The meal starts on "No preference". A missing ticket count moves focus to the General stepper. Each other problem moves focus to its own field.

The label above it names the select's button for screen readers, and focus can land on that button when the meal is missing. The select's trigger takes the id, and the label points to it with htmlFor.

It thanks the visitor by first name and repeats the tickets they hold, the total and the meal, plus the email they typed. It's a status region that takes focus when it appears. The ticket list stays visible and stops accepting changes. "Register someone else" clears the counts back to zero, returns the meal to "No preference", and puts focus on the details heading.

No. hello@cairnfield.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0110 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF, HOURS and WHEN. The date is fixed in the file. It is not the visitor's clock. Prices and the phone number keep their order in a right-to-left layout.