shadcn.io is not affiliated with official shadcn/ui
Insurance Check FAQ Block for Solid
A primary-care FAQ with an insurance check on a card in card: type the start of a plan and it answers in network with a copay, or out of network, above seven questions in an accordion.
Installation
Overview
An FAQ for Solid with Ark UI. Under a compact header, a card in card, a tinted shell with + marks on its corners around a raised panel, holds an insurance check: type the start of your plan, "Ald" for example, pick it from the list, and a status beside it says "In network" with the copay for a visit, or "Out of network" with the self-pay fee. Seven questions about booking, video visits and records follow in hairline rows under a rule with + marks, the first one open. The result area keeps its height while you type, and a phone stacks the field above the result. The plans are made up and the card says so. It's built from Autocomplete, Status, Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For clinics and care providers whose first question is whether a plan is accepted.
FAQ
How do I change the plans and questions?
Edit PLANS and QUESTIONS at the top of the file. A plan is an id, a name, whether it's network and, for plans in network, the copay in dollars (0 reads "No copay"); SELF_PAY is the visit fee shown for plans out of network. The names here are made up: replace them with your own, and keep the list short enough to scroll in the dropdown. The sentences under "In network" are built from those numbers, so they never drift from the data.
How does the check work?
The field filters the list as you type, by the plan's name and ignoring case. The card answers when what's in the field matches a plan's name in full, which happens as soon as you pick one from the list. While you type, it says to pick from the list, and if nothing matches it says the plan isn't in the check and to call the front desk. Clear the field with the button inside it.
It's a Combobox that keeps what you type (allowCustomValue), so leaving the field with text that isn't a plan leaves the text and the card's message as they are.
What do screen readers hear?
The field is labelled "Your insurance plan", the list is a listbox you move through with the arrow keys, and the result is a polite status that reads out "In network" or "Out of network" with its detail when the choice changes. The status dot is decoration: the words carry the meaning. Each question is a button inside its own h3 under the section's h2.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. The result card is state, not content, so only the questions are in the markup.
How does it work with a keyboard?
Tab moves from the field to the first question and on down the rows; Enter or Space opens one. In the field, Down opens the list, Enter picks the highlighted plan and Escape closes it. The Up and Down arrows also move between questions, and Home and End jump to the first and last.
Does the block give medical or insurance advice?
No. It only compares a name with your own list and shows the numbers you typed into PLANS. The card labels the plans and copays as examples, and the questions answer how the clinic works, not what to do about a condition: keep it that way when you write your own.