Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Account blocks

Pro

Tax Information Account Block for React Aria

The identifiers an account holds to pay out (tax ID, national ID, date of birth), kept masked with Verified and Pending review badges, a country-aware replace form, a Remove only where it is not required and a Why we ask fold.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Hold the identifiers a payout needs without showing them, with this tax information section for React with React Aria. A hairline frame with a plus mark on each corner has a list at the start and a side cell at the end. The list shows a tax ID, a national ID and a date of birth, each as its last four digits (or its year) with a Verified, Pending review or Not on file Badge; Replace fills the form under the list, where the tax ID's country Native Select changes its label and how many digits it takes (a US Social Security number or EIN, a UK UTR, a German Steuer-ID) and the new value shows masked and Pending review once saved. Remove is offered for the national ID only, with an Alert Dialog; the other two say "Needed for payouts". The side cell says who can see the identifiers, what they are used for and for how long, with a Collapsible "Why we ask". It's built from Native Select, Field, Input, Alert Dialog, Collapsible, Badge, Shine Button and Guides, with a CSS entrance only. For the payouts or tax page of any platform that pays creators.

FAQ

How do I add a country or an identifier?

Add a country to COUNTRIES with its id, name, the label of its tax ID and the number of digits; the form's label and the check follow. Identifiers are SPECS (name, whether they are required, what they are used for) and START (the masked value and its state). Keep only a mask in the page: the real value belongs on your server.

What stays local, and how do I make it real?

Saving checks the digits in the browser, changes the page and says in the status line that nothing was stored; a replaced identifier shows as Pending review, as a real one would until you verify it. In a real app post the value over a secure connection straight to a route that validates it for the country, stores it encrypted, and returns only the mask. Never put the full value in the page's HTML, in a log or in the URL.

What does the form check?

The tax ID needs exactly the digits its country takes (9, 10 or 11), spaces and hyphens ignored; the national ID takes 6 to 12 digits; the date of birth must be a date at least 18 years before the page's "as of" day. A wrong value gets a line under the field, in the reserved slot, so nothing moves. Real validation also checks the format and the checksum on the server.

Why can't some identifiers be removed?

Removing a tax ID or a date of birth would stop payouts, so the row says "Needed for payouts" in place of the button instead of offering a button that fails. The national ID is optional, so it has Remove and a confirm.

How does it look on a phone?

The side cell stacks under the form and keeps its own rule. Rows, the form and the Why we ask fold are one column; the form keeps its fields in place whether or not a row is being replaced, so the page doesn't grow when you press Replace.

All 100 account blocks