shadcn.io is not affiliated with official shadcn/ui
Tax Exemption Form Billing Block for React
A sales tax exemption request: four types (non-profit, government, resale, educational), two fields that change with the type, the certificate's expiry derived from its issue date, and a drop zone for the certificate.
Installation
Overview
Collect an exemption certificate without a wall of fields, with this tax exemption form for React with Base UI. A hairline frame with a plus mark on each corner puts four radio rows at the start (Non-profit, Government, Resale, Educational) and the details at the end. The details are the organisation's name, the certificate's issue date and two Fields that belong to the chosen type: an EIN and a determination date, an agency and a level, a permit number and a state, or an accreditation ID and an accrediting body. Under the issue date a line says how long the certificate is valid ("Valid 3 years, to 14 Oct 2029"). A File Upload drop zone takes the certificate. Submit names the first missing field and moves focus to it, and a Shine Button, "Submit exemption", is the only colored control. It's built from Field, Input, Native Select, File Upload, Button, Shine Button and Guides, with a CSS entrance only. For ed-tech, B2B stores and any seller that handles exempt buyers.
FAQ
How do I change the types or their fields?
Edit KINDS and SPECS at the top of the file. A type has an id, a label, a note and the two SPECS keys it shows. A spec has its label, its hint, its entry (text, date or select), the options of a select, the pattern a valid value matches and the sentence shown when it does not. The organisation and the issue date belong to every type, and the validity (three years) is expiryOf.
Why does the panel not change height between types?
All four types' field pairs sit in one grid cell, the inactive ones hidden and out of the tab order, so the cell is as tall as the tallest pair. The hint under each field and its problem share one slot, so a message replaces the hint without moving anything.
Is the certificate uploaded or read?
No. The drop zone keeps only the file's name in this page's state. A type other than PDF, PNG or JPG, or a file over 10 MB, is refused in words under the zone. In your own version, send the file from take to storage you control, and have a person or a service check it against the certificate rules of the state before you stop charging tax.
What stays local, and what does submitting do?
Everything. Submit checks the fields and, when they are complete, says "Received in this demo. Files stay in this tab." and nothing is sent; pressing it again says so, and changing any field makes it ready again. Clear form puts the organisation and the date back and drops the file. Wire submit to the call that creates the exemption on your server.
What gets checked, and where does focus go?
The organisation, the issue date (not in the future), the type's two fields and the certificate. Each problem is written under its field and the first one is read in the status line; focus moves to that field, or to the Choose a file button for the certificate. The formats are checked as shapes (an EIN is two digits, a dash and seven digits); nothing is looked up.