Currency workflows · 2026-09-05
Money controls should speak the local language.
Opus 0.7.2 brings international currency formatting and a dedicated selector that makes the right choice clear before data leaves the form.
A small family of controls built around the practical details of entering, recognising, and storing money correctly.
Explore the components
const [currency, setCurrency] = useState("GBP");
<CurrencySelectField
id="currency"
label="Currency"
value={currency}
onChange={setCurrency}
/>const [budget, setBudget] = useState(24800);
<CurrencyField
id="budget"
label="Budget"
currency="GBP"
value={budget}
onChange={setBudget}
/>A selector with context
CurrencySelectField makes the full ISO 4217 catalogue searchable by country, currency name, code, or sign. Every row pairs the code with a flag, territory, and display sign, so a choice is understandable at a glance.
A compact value, not a display string
The richer row is for people; the value is for applications. Selecting a currency returns the compact ISO code such as GBP or JPY, ready to store, validate, and pass between systems.
Formatting that respects the currency
CurrencyField now follows each selected currency’s locale-aware grouping, decimal precision, and sign placement. It leaves a value alone while a person is typing, then formats it cleanly on blur.