shadcn.io is not affiliated with official shadcn/ui
Dependent Fields Tax ID Form Block for Radix UI
A tax details panel where a country select decides the next field: its label, placeholder, mask and rule change for four countries, with a rule card that states the format.
Installation
Overview
Let one field decide the shape of the next with this dependent fields form for React with Radix UI. A compact header sits over a hairline frame with a plus mark on each corner. A country select offers four (United States, United Kingdom, Germany, India) and decides the tax ID under it: the label becomes EIN, VAT number, USt-IdNr or GSTIN, the placeholder and mask change with it, and typing lays the characters into the mask (12-3456789, GB 123 4567 89) and drops the ones the rule cannot hold. A rule card beside the fields, a description list, states the name, the format, an example and what the number is. Changing the country re-checks what is typed: it keeps the value and re-lays it when it still fits, and keeps it as typed, with the reason, when it does not. The check starts when you leave the field or press Save and then follows each key, and the message line is reserved so nothing jumps. It's built from the Select, Input, Field, Shine Button and Guides. For tax and invoice settings, address forms, payment methods and any field whose rules depend on another.
FAQ
How do I add a country?
Add an entry to COUNTRIES and a rule to RULES with the same id: the field's name, the example, the mask as group sizes with a separator, an optional prefix, the character kind and the length. charsOf, shapeOf and verdictOf read only that rule, so nothing else changes. A pattern for a stricter check, like the GSTIN one, goes in verdictOf.
Does it check that the number exists?
No. It checks the format only, as the hint says: length, characters and, for GSTIN, the pattern. A number can have the right format and still belong to nobody. To check one for real, send it to the tax authority's lookup from your server and show the result next to the format check.
How does it work with a keyboard and a screen reader?
The country select and the tax ID have their own labels, and the tax ID's label changes with the country, so a screen reader hears the right name. The hint or the problem is tied to the input and reached from it. A failed Save moves focus to the tax ID. The mask is laid in as you type, so editing in the middle of the value moves the caret to the end.
How does it look on a phone?
The rule card stacks under the fields with its own top rule, and every line in it keeps its space so nothing moves when the country changes. The foot is pinned to the bottom of the screen with Save at full width.
What stays local, and how do I connect it for real?
The format check runs in the tab and nothing is saved: the foot says "Saved in this demo. Nothing sent." The four rules are typed. In your app, store the country and the number together, and validate with the same rule on the server so both sides agree.