shadcn.io is not affiliated with official shadcn/ui
Invoice Picker Subscription Contact Block for React Aria
A billing question for a cloud storage service: the last three invoices as cells with overshoot lines, the chosen invoice's lines and total in a panel that stays in view, a reason select and a message.
Installation
Overview
A billing contact section for React with React Aria. A start-aligned header sits over a form that opens on the last three invoices, drawn as three cells whose hairlines overshoot their corners, each showing the month, the amount and how many lines it has. They are one single-choice list: arrow keys move between them and choosing one rings it in your foreground colour. The chosen invoice opens in a panel under them as its lines with the total worked out from those lines, so the charge stays in view while the visitor writes. A reason Select, a message, a name and an email finish the form. Submitting checks every field and focuses the first problem; a valid question turns into a confirmation that names the invoice, its total and the reason. A billing-desk block (email, phone, hours) closes the section. It's built from Listbox, Item, Select, Textarea, Field, Input, Guides, Shine Button and Button, with your theme's tokens for every colour. The invoices and amounts are example data. For SaaS, storage, hosting and any service whose customers ask about one specific charge.
FAQ
Where do the invoices come from?
From the INVOICES array at the top of the file: each has a month, a value and its lines in cents. The amounts shown on the cells and the total in the panel are both worked out from those lines, so they always agree. Replace the array with the visitor's real invoices from your billing system; the months and amounts here are example data.
How do the invoice cells behave?
They are a single-choice Listbox: Tab reaches the list, arrow keys move between invoices, and a chosen invoice cannot be unchosen (it can only be changed). Submitting with none chosen puts focus on the list and says which question is open.
What does the panel under the cells show?
Until an invoice is chosen it says "Choose an invoice to see its lines." Afterwards it lists the lines with their amounts and the total. It keeps a minimum height so choosing a one-line invoice and then a three-line one does not push the form around much.
Where does the question go?
Nowhere yet. The submit waits 800 milliseconds as a stand-in for a request, then shows a confirmation that echoes the invoice, its total and the reason. Replace the timer in submit with your call: details holds the invoice value, the reason, the message, the name and the email.