Treatment Menu Tabs 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 booking system or inbox: treatmentId, addons, name and email hold what the visitor chose. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

Edit MENUS (three tabs of three treatments, each with a name, a line about it, its minutes and its price) and ADDONS. Prices are plain numbers formatted with a fixed en-US currency formatter, and each figure is wrapped so it keeps its order in a right-to-left layout. The total is the chosen treatment's price plus the ticked add-ons.

Every panel is also drawn once, unseen, in the same grid cell (Sizer), so the cell takes the tallest panel's height whichever tab is open. The unseen copies hold no controls, are hidden from assistive technology and can't take focus. A treatment chosen in one tab is remembered: its radio shows as chosen only while its own tab is open, and the status line names it from any tab.

Arrow keys move between the tabs; Tab then moves into the open panel. Within a menu the three treatments are one radio group: arrow keys move between them and choose. Each add-on is a checkbox, toggled with Space. Whole cells are labels, so clicking anywhere in a cell chooses it.

No. +1 (415) 555-0126 is in the 555-0100 to 555-0199 range set aside for fiction, and stay@salthouse.example uses the .example domain, which is reserved for examples. Replace PHONE, PHONE_HREF and EMAIL at the top of the file with yours.

The pill tabs scroll sideways inside their band if they don't fit. The treatment cells stack one per row, the add-ons stack one per row, and the name and email go one per row, with the total above them. The submit button goes full width, so nothing scrolls sideways at 320 pixels.