shadcn.io is not affiliated with official shadcn/ui
Address Form Billing Block for Radix UI
Change a billing address and choose which invoices it reaches: from the next invoice, also the open invoice reissued, or the last three after a review, with a printed preview and a list of what changes.
Installation
Overview
Let a customer fix the address on their invoices and decide how far back it goes, with this billing address form for React with Radix UI. It is the account page of Ledgerhurst, accounting software for design studios. A hairline frame with a plus mark on each corner holds three prefilled Fields (street, city and a UK postcode that is checked for its shape) and, under them, three radio rows for the scope: from the next invoice on 12 Nov, also reissue the open invoice 2026-0142 (it is voided and reissued as 2026-0143), or reissue the last 3 invoices, which needs a review and takes 2 business days. A preview prints the address as it will read, and a short list says what changes: when it applies, how many invoices are reissued and their numbers, and whether a review is needed. The Shine Button is the only colored control, takes its label from the scope ("Save from 12 Nov", "Save and reissue 2026-0142") and stays quiet while the address is unchanged. It's built from Field, Input, native radios, Badge, Shine Button and Guides, with a CSS entrance only. For account settings, invoicing apps and any product that issues invoices.
FAQ
How do I change the address, the invoices and the country?
Edit the constants at the top of the file. SAVED is the address on the account, BILL_TO and COUNTRY print in the preview, NEXT_INVOICE is the first invoice a change reaches, and OPEN_SEQ, YEAR and LAST_COUNT set the invoice numbers and how many the last option reissues. For another country replace the POSTCODE pattern and the hint.
What does reissuing an invoice mean here?
The old invoice is voided and a new one is created with the next number and the new address, and the two stay linked so an auditor can follow the change. Reissuing the last three is held for a review because the invoices may already be paid, filed or exported to a tax return.
What stays local, and how do I wire it up?
Saving updates the address in the tab and says "Saved in this demo, no invoice was reissued". In your app store the address on the customer at your billing provider, so the next invoice picks it up, and run the reissue as a job on your server; only the scope that was chosen should create new invoices.
When are the fields checked?
When you press the button. Each field shows its problem in a reserved slot in the text color with a red icon, the status line says to fix the marked field, and focus goes to the first one. With nothing changed the button answers "No changes to save" instead.
Is it accessible?
Fields have visible labels and their problems are linked to them. The scope is one group of native radios under a visible heading, so arrow keys move between the rows. The preview is an address element, the changes are a description list, and the status line is a polite live region.