shadcn.io is not affiliated with official shadcn/ui
Insurance Check FAQ Block for React
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 React with Base 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 Base UI's Combobox: leaving the field with text that isn't a plan puts the last plan you picked back, or empties the field if there was none, and the card follows.
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 hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found", and the browser's find in page opens the answer that holds a match. 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. Tab moves from question to question.
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.
Related
- Pro
Answer Finder FAQ
SearchAn answer finder for a team writing tool on a card in card: describe a problem and the closest help article opens, quoted word for word, with two ranked articles to try.
- Pro
Live Search FAQ
SearchA searchable FAQ for a notes app: a start-aligned header, a band with a full-width search field and a live count, and ten questions that filter as you type, open every match and mark the matched words.
- Pro
Command Palette FAQ
SearchA FAQ for a docs host with a working command palette: a search-field button with its shortcut opens a palette of questions by topic, and choosing one opens its row below.
- Pro
Topic Select FAQ
Topics and filtersA short FAQ for a bike-share with a topic Select at the end of its header: choose a topic and its questions fill the rows below, or choose All topics for all twelve.
- Pro
Accordion FAQ
Accordion listsA side-header FAQ for a web analytics tool: the title, one sentence and a contact prompt beside seven questions in an accordion, behind a split divider.
- Pro
Pricing With FAQ
Proof and guaranteesPlans answered by the pricing FAQ for an e-commerce builder: a compact plan list, a row each with its name, price and call to action, beside an accordion of six questions with the first one open, in one ruled band.