shadcn.io is not affiliated with official shadcn/ui
W-9 Verification Status Billing Block for Radix UI
A W-9 verification trail with a mismatch branch: four stages with timestamps, a Preview outcome control (in progress, matched, mismatch) and, on a mismatch, a field to correct the legal name and resubmit.
Installation
Overview
Tell a contractor where their tax form stands, with this verification trail for React with Radix UI. A hairline frame with a plus mark on each corner holds three bands. The first is a labelled demo control, "Preview outcome", a group of radio pills (In progress, Matched, Mismatch). The second is the trail, an ordered list of four stages (Submitted, Format check, Name and number match, Verified) with a marker in foreground tones, a fixed UTC time and a spoken state for each. The third changes with the outcome and keeps one height: on a mismatch it explains and shows an Input for the legal name with a Shine Button, "Resubmit", the only colored control; matched says the form stays valid until the name or entity changes; in progress says payouts stay held. It's built from Field, Input, Shine Button and Guides, with a CSS entrance only. For payout platforms, marketplaces and any app that holds money until a tax form clears.
FAQ
What is the Preview outcome control, and should I ship it?
It is a demo control, labelled as one, so the three states can be seen on one page. In a product, remove it and pass the real status to stagesOf and to the band; the status comes from your payer's match results. It sits in its own band, so removing it does not touch the rest.
How do I fill the trail?
FIRST and AGAIN hold the stage times as UTC ISO strings, and stagesOf turns an outcome into the four stages with a title, a meta line, a marker state (done, current, problem or waiting) and the word a screen reader hears after the title. Dates are fixed in the data, never computed from the visitor's clock.
What does Resubmit do?
It checks the name (at least three characters, and not the one that was already sent), and when it is good it restarts the match: the trail shows a new submission time, the third stage is in progress and the band says matching continues. A name that is empty or unchanged is explained under the field, focus goes back to it and the same sentence goes to the status line. Nothing is sent or verified in the demo.
Does the panel change height between outcomes?
No. The three bands for the outcomes share one grid cell, with the inactive ones hidden and out of the tab order, and the field has a reserved line for its problem, so switching never moves what is below.
Is it accessible?
The trail is an ordered list and each stage says its state in words, so the marker is never the only signal. The preview group is a named radio group with arrow keys. The status line is a polite live region and repeats the outcome after each change. Times are set left to right inside right-to-left pages.