CurrencyInput
Locale-aware monetary input that stores values in minor units (cents). Raw editing on focus, formatted display with currency symbol on blur.
Playground
01 Examples
Default — Euro with German locale
USD with prefix symbol
JPY — zero decimal precision
Auto locale — defers to the runtime (en-US)
02 Working with major units
CurrencyInput stores values in minor units (cents) so summing,
sorting, and persisting amounts stay free of floating-point drift. When integrating with an
API or datastore that uses major-unit floats (e.g. 1234.56 for €1.234,56), use
the exported centsToMajor / majorToCents helpers at the boundary — and
keep the in-memory representation in cents.
Cents in, major units out
Stored as cents: 123456 · Exported as major: 1234.56
Float-precision caveat: a major-unit value that has already lost precision
before reaching majorToCents (e.g. 0.1 + 0.2) cannot be recovered.
For values that must round-trip exactly across system boundaries, transport them as minor-unit
integers (or as strings) instead of major-unit floats.
03 Customization
CurrencyInput wraps <Input>, so all InputProps (label, helper, error, slotClasses, …) flow through. The cents-based value, locale, currency, symbolPosition, and precision props add the locale-aware behaviour on
top.
Use symbolPosition="none" for headless numeric editing where you want the locale formatting
(grouping / decimal separator) without the currency symbol.
04 Accessibility
- Inherits
aria-invalid/aria-describedbywiring from the underlying<Input>via thelabel,error, andhelperprops. - Sets
inputmode="decimal"so mobile keyboards open the numeric pad with a decimal separator. - Raw editing while focused — formatting happens on blur, so screen-reader users hear the unambiguous typed value.
05 API Reference
No matching properties |