shadcn.io is not affiliated with official shadcn/ui
Fee Guide FAQ Block for React Aria
A FAQ for a law firm with a matter-type fee guide beside its title: a select of four matters over the typical cost, time, who leads and what an instalment plan comes to, then seven numbered questions.
Installation
Overview
A fee guide FAQ for React with React Aria. A title and one sentence sit at the start of a band and a card in card sits at its end: a select of four matter types, Employment, Tenancy, Wills and Small claims, over four facts for the chosen one, its typical cost, how long it takes, who leads it and what an instalment plan comes to each month. The guide keeps its height whatever you choose, so nothing below moves. The costs and the instalments are worked out from one typed table, and a quiet line says the figures are examples. Seven questions follow in hairline rows under a rule that runs rail to rail, each numbered with a section sign. On a phone the guide stacks under the title. It's built from Accordion, Select, Data List and Guides, with your theme's tokens for every colour. For law firms, accountants, clinics and any service that quotes by the kind of job.
FAQ
How do I change the matters and the figures?
Edit MATTERS at the top of the file: each matter has a value, a label, the typical cost at the bottom and the top in cents, how long it takes, who leads it and how many months a fixed fee can be spread over. The instalment is the lowest typical cost divided by those months, rounded up to a whole dollar, so it is never more than the sum says. The select, the four facts and the answer about instalments all read from the same table.
How does the select work?
The Select takes a SelectItem with an id for each matter and reports the chosen key: choosing one sets it and the facts change at once.
It is named "Matter type", opens with Enter, Space or the Down arrow, and a polite status that only a screen reader sees says "Wills: typically $450 to $1,200, 1 to 2 weeks" after each change.
How are the amounts written, and what about right-to-left layouts?
Money is formatted by one Intl.NumberFormat for US dollars, shown as whole dollars, and each range or instalment sits in a dir="ltr" span so "$2,400 to $6,500" keeps its order in right-to-left layouts. The section signs are decorative and hidden from assistive technology; the questions' order carries the same information.
Are the closed answers in the page's markup?
Yes. React Aria keeps every closed panel in the markup as hidden="until-found". One answer is open at a time.
How does it work with a keyboard?
Tab moves from the select to the first question and on down the rows; Enter or Space opens one. Each question is a button inside its own h3 under the section's h2.
How does it fit on a phone?
Below the lg breakpoint the title comes first, the guide follows with the select across its full width, and the questions run from rail to rail. The values are short on purpose, so no matter wraps differently from another and the guide's height never changes. Nothing scrolls sideways at 320 pixels.