shadcn.io is not affiliated with official shadcn/ui
Tax ID Verification Billing Block for Radix UI
Tax registrations by region: each row has a masked number, a status in words, the next check date and what it changes on invoices, with Check now per row, Check all due, and a form that adds a registration after a format check.
Installation
Overview
Keep an account's tax numbers current, with this tax registration list for React with Radix UI. A hairline frame with a plus mark on each corner lists the registrations by region, each row with a two-letter tile, the number masked to its last four characters, a status in words with a dot (verified on a date, so many days overdue, not checked yet, or not found), the next check date, and one line on what the registration changes on invoices, such as 20 percent UK VAT until it is verified. Each row has an outline Button, "Check now", and the header has the only colored control, a Shine Button, "Check all due". A form at the foot adds a registration: a Native Select of the kinds not yet on the list, an Input for the number, and a format check with a problem line. A status line says what was checked. It's built from Field, Native Select, Input, Button, Shine Button and Guides, with a CSS entrance only. For invoicing tools, marketplaces and any account that bills in more than one country.
FAQ
How do I fill it with the account's registrations?
Edit START, one object per registration with its kind (a code from KINDS), the number, the date it was verifiedOn as an ISO string and its check state. KINDS holds each type's label, its pattern, its cycle in days (90 for a VAT number, 365 for an EIN or an ABN), an example for the hint, and the two sentences for what it changes when it is current and when it is due. The next check date is the verified date plus the cycle, and "now" is the single AS_OF constant.
What does Check now do, and what stays local?
It looks the number up in REGISTRY, a short typed list of example numbers, and sets the row to verified today or to "Not found in the example data". Nothing is sent to a tax authority, and a number that is not in the list fails on purpose so you can see that state. For a real check, call your tax provider or the EU VIES service from your server in checkOne and write back the verified date it returns.
What does Check all due do?
It checks every registration whose next check date is today or earlier, including one that was just added and never checked, and the status line says how many it checked. When nothing is due it says so instead. The header shows a count of what is due.
How does adding a registration work?
Choose a kind, type the number and press Add. The format is checked first, and a wrong one is named under the fields with focus on the one to fix. A good one is added as "Not checked yet" with its next check date set to today, and the kind leaves the list so it cannot be added twice. The demo holds five registrations; the hint says so when the list is full.
Is it accessible?
Status is written as words, the dot is decorative, and each Check now button names its row for a screen reader. Numbers and dates are set left to right inside right-to-left pages. The status line is a polite live region, and the number is masked in the page text, not only on screen.