shadcn.io is not affiliated with official shadcn/ui
Invoice Currency Select Form Block for React
A grouped currency select with symbol, code and name, an amount field, and the same amount in three other currencies from typed sample rates, set with Intl.NumberFormat.
Installation
Overview
Choose the currency an invoice is written in with this currency select form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner, in two cells. The first holds a Select of twenty currencies in two groups, Common and More currencies, each row its symbol, its code and its name, and under it an amount field with the symbol before and the code after. The second cell shows the same amount in three other currencies, set with Intl.NumberFormat (yen and won have no decimals), and under each name what one unit of the chosen currency is worth. The rates are a typed table dated 9 October 2026 and the cell says they are not live. The amount is checked against the currency once focus moves on or Save is pressed, and a failed press puts focus back in it. It's built from Select, Input Group, Shine Button and Guides, with a CSS entrance only. For invoicing, pricing and checkout forms where the amount and the currency are chosen together.
FAQ
Where do the rates come from, and how do I use real ones?
They are a typed table, rate on each currency: units of the currency for one US dollar, for the sample day 9 October 2026. They are not live and the cell says so. To use real rates, fetch them on the server from your bank or a rates service, pass them in and keep the date next to them. The conversion works in each currency's smallest unit and rounds once, so a total never gains or loses a cent on its way through.
How are the amounts formatted?
Every amount goes through Intl.NumberFormat with the currency's own digits, so "¥186,875" has no decimals and "€1,150.00" has two. The amounts are set in boxes that keep their digits ASCII and in order in a mirrored page. The amount you type accepts digits, commas and one decimal point, and says if you use more decimals than the currency has.
How do I add or reorder currencies?
Edit COMMON and MORE: each has a code, its decimal places, a name, a rate and a symbol. The select, its two groups, the typeahead (type the first letters of a code, such as "J" for yen) and the conversion rows all come from them. The three currencies shown are always the first three of US dollar, euro, yen and pound that are not the chosen one.
How does it work from the keyboard?
The select opens with Enter, Space or Arrow Down, moves with the arrows, jumps by typing and closes with Escape. The amount is an ordinary text field with a decimal keyboard on phones; there are no steppers, so typing "1250" and tabbing away always does what it says on every base.
What stays local, and how do I connect it for real?
Nothing is saved or sent: Save currency says "Invoice set to €1,250.00. Nothing was sent." and a second press says it is already the invoice. Replace the body of submit with a call that stores the currency and the amount, and keep the money in whole cents on the way.
How do I connect it to react-hook-form or TanStack Form?
The form has two values, the currency code and the amount text. With react-hook-form, use Controller for the select (pass the code to field.onChange from choose) and register for the amount, and validate with amountOf. Convert for display only: store the amount in the invoice's own currency.
Related
- Pro
Ship-To Country Select Form
SelectsA combobox of 20 countries in four areas, each with a two-letter tile and calling code, where four are out of reach with the reason in the row and a band gives what a parcel to the chosen country needs.
- Pro
Case Quantity Number Input Form
Numbers and pickersA quantity field that sells in cases of six: typing a number snaps it up to a whole case on leaving, the keys and buttons move one case or five, and the line total is worked out in whole cents.
- Pro
Grouped Person Select Form
SelectsA select of nine people grouped by team, each with initials, name and duty, beside a week strip that shows that person's hours and marks a week that would pass 40 hours.
- Pro
Time Zone Select Form
Dates and timesA grouped select of sixteen time zones with the offset in each label, a real read of the device's own zone after the page loads, and one sentence saying how far the chosen zone is from it.
- Pro
Target Language Select Form
SelectsA form that adds a target locale: twelve languages written in their own script, a region select that appears when the language has variants, the resolved tag in a code element and a list of targets that refuses duplicates.
- Pro
Credit Card Field Form
Checkout and addressA card as one joined control: number, expiry and CVC in a single group with one focus ring, a brand from the first digits, auto-advance, errors that name the part, and only the brand and last four kept after Save.