Symptom Triage Contact Block for React

The hint and the notice share one grid cell. An unseen copy of the notice sets the height, so the cell is as tall as the notice at all times, and the visible content swaps between the two. The cell is a status region that is there from the start, so a screen reader hears the notice when chest is chosen and nothing before. The wording is "If this is an emergency, call 911": change it for your country's emergency number in Emergency.

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: details holds the areas, how long, the insurer, member ID, name, email, note and the consent. Keep real health information out of a demo, and send it only over a connection and to a system your clinic's privacy rules allow.

The form has noValidate, so the block shows its own messages under each field and moves focus to the first problem. It needs at least one area, how long, a name, a plausible email and the consent box. The member ID is only required when an insurer other than Self-pay is entered, and it must be 6 to 14 letters and numbers. Fields with text check themselves when you leave them and clear as you fix them.

It takes anything you type and suggests the example plans as you do: nothing forces a match, because a plan missing from a short list shouldn't block a request. The list holds fictional plans and Self-pay; replace INSURERS with yours. The list is a Base UI Combobox on an array of names; typed text stays as it is.

They are a multiple-choice Toggle Group named "Where do you feel it?", so each toggle reports whether it is pressed and several can be on at once. A pressed toggle is filled with the foreground colour rather than the primary, which stays on the one button. If none is pressed on submit, the message appears under the row and focus moves to the first toggle.

Below lg the parts stack: the header, then the form straight away, then the clinic's details under a rule with + marks. The toggles wrap onto a second row, the name and member ID fields go one per row, the button goes full width, and under 360 pixels the detail labels shrink to their icons (screen readers still hear them). The email and phone keep their order in a right-to-left layout.