shadcn.io is not affiliated with official shadcn/ui
Fee Calculator FAQ Block for Radix UI
A FAQ for a business bank whose first answer is a fee calculator: an amount field and a three-way speed control show the fee, the total and the arrival time, beside five questions on safety and limits.
Installation
Overview
A fee calculator FAQ for React with Radix UI. A narrow start column holds the title and one sentence; the six questions sit in the end column behind a split divider that runs from the page's top rule to the block's end. The first question is open on load and its answer holds a small calculator in a card in card: type an amount, choose Standard, Instant or Wire, and three figures answer at once, the fee, what leaves the account and when the money lands. Every figure comes from one typed table of speeds, so the questions about limits and fees read the same numbers, and a quiet line says they are examples. On a phone the calculator stacks under its question. It's built from Accordion, Input Group, Segment Group, Data List and Guides, with your theme's tokens for every colour. For banks, payment apps and any product whose price depends on an amount and a speed.
FAQ
How do I change the speeds and fees?
Edit SPEEDS at the top of the file: each speed has a label, when it arrives, a flatCents part, a percentage part in basis points (rateBps) with its minCents and maxCents, and a limitCents ceiling. feeCents turns an amount and a speed into the fee, rounded to a whole cent. The answers about fees and limits are built from the same table, so changing a number changes the calculator and the text together.
What can people type in the amount field?
Digits and one dot; anything else is ignored when the amount is read, so "1,200" works. An empty amount shows dashes and says "Enter an amount to see the fee." An amount over the speed's ceiling shows dashes too and names the ceiling, so nobody reads a fee for a transfer that can't be sent. The status line under the figures is a polite live region, read out as the amount or the speed changes.
How are the figures written, and what about right-to-left layouts?
Money is formatted by one Intl.NumberFormat for US dollars, and each amount sits in its own dir="ltr" span, so a "$2.99" keeps its order in right-to-left layouts. The figures are labelled "Example figures only", once, under the calculator. To use another currency, change USD and the $ in the field.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its question opens. The calculator keeps its values anyway, because they live in the block, not in the answer. For search engines, add structured data built from the same QUESTIONS array.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3 under the section's h2. Tab moves from a question to the amount field, then to the speed control, which is a radio group: arrow keys move between Standard, Instant and Wire and choose as they go. The amount field is named "Amount to send", and the three figures are a description list a screen reader reads as pairs.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
How does it fit on a phone?
Below the lg breakpoint the title stacks above the questions, the rows run from rail to rail, and inside the open answer the amount field and the speed control stack, with the figures under them. The status line keeps room for two lines, so choosing a speed never moves what's below. Nothing scrolls sideways at 320 pixels.