Doctor Insurance Plan Check Profile Block for React

Edit PLANS. Each plan has a name, a kind of in, out or no for in network, out of network or not accepted, a copay, a referral line, up to two hospitals and one note the office would say. BOARDS lists the certifications. The counts in the band heading ("8 of 14 plans in network") are worked out from the list, so they follow your data. Keep the hospital names short: the result card keeps its height by reserving two lines for them.

In network means the office bills the plan directly at the listed copay. Out of network means the office can still see you, but it does not bill the plan: you pay, ask your plan about a refund, and the card says to ask the office. Not accepted means the office does not take the plan at all. Each answer is a word and an icon in a tile, never a colour, so it reads the same in every theme. Every plan, board and hospital here is invented, and nothing is checked against a real list.

Type any part of a plan's name and the list narrows to the plans that contain it; with no match it says so. Picking a plan fills the box and the card, and clearing the box puts the empty card in its place. Opening the list again after a pick shows every plan, not only the one you chose. Here the list filters itself from the items you pass it.

Nothing leaves the page. It records the question in the status line, which says Asked in this demo and that nothing was sent. With no plan chosen it says to pick one first and moves focus to the plan box. To make it real, send the doctor, the plan and the visitor's contact details to your own API from the click handler, and show its answer in the same status line.

The plan box has a visible label and the list is a real listbox, so arrow keys, Enter and Escape work as in any combobox. The result card is plain text and a description list, the certifications are a list, and the status line is a polite live region present from the start: it says the plan and its answer after each pick. Nothing depends on colour, and in a right-to-left layout the plan names, copays and counts keep their order.

Everything stacks in one column. The result card keeps its height whichever plan is shown, because its lines are reserved, and the status line stays on one line above the button. The new-patients badge in the person band is hidden below the small breakpoint to keep the name on one line.