shadcn.io is not affiliated with official shadcn/ui
Tax Details Billing Block for Vue
Billing address and tax ID in app settings: a form that checks the postal code and tax number against the country, an optional invoice note, and a live preview of the invoice header.
Installation
Overview
Collect what an invoice needs, with this billing address and tax ID section for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a form and a preview side by side. The form has Fields with an Input each for the legal name, address, city, state or province, postal code and tax ID, a Native Select for the country and a Textarea for an invoice note such as a PO number. The postal code and tax number are named and checked for the chosen country, so Canada asks for a postal code and a GST/HST number while the United States asks for a ZIP code and an EIN. Saving with a mistake names it beside the field and moves focus there. The preview is a small invoice header, framed with plus marks, that rewrites itself as you type. A Shine Button saves, the only colored control. It's built from Field, Input, Native Select, Textarea, Button, Shine Button and Guides, with a CSS entrance only. For billing settings, B2B checkouts and invoicing apps.
FAQ
How do I add a country or change a format?
Edit COUNTRIES. Each country has its code and name, and two shapes, postal and tax, each with the label the field takes, an example shown in the hint and the error, and the pattern a valid value matches. SAVED holds what the account starts with and ISSUER the "From" block of the preview.
Does it verify the tax ID?
It checks the shape only: a 9-digit GST/HST number followed by RT and four digits, a UK VAT number with or without GB, and so on. It can't tell whether a number is registered. To verify, look the number up on your server, with the European VIES service for EU VAT numbers or a tax provider, before you rely on it to zero-rate an invoice. The field is optional; if it's filled, it has to match.
What gets checked when I save?
The legal name, address and city must be filled, the postal code must match the country, and a tax ID, if there is one, must match too. Each problem is written under its field and tied to it for screen readers, and focus goes to the first. Changing the country clears the postal and tax errors, because what's valid has changed. Saving a clean form shows a confirmation; connect it to the call that updates the customer.
What does the preview show?
The invoice header as it will print: your company as the issuer, the number and the "Bill to" block with the name, the address, the city and region, the postal code, the country, the tax ID with its country's label and the note. Empty fields show quiet placeholders, so you see what's missing. It's plain text on a small page, not an image, so it can be read and selected.
Is the form accessible?
Every field has a visible label, the optional ones say so, and the hint under the tax ID is linked to the field. The country is a native select, so each platform's own picker opens, including the one on a phone. Autofill hints (organization, street-address, address-level2, address-level1, postal-code) let browsers fill in the text fields in one go.