CurrencyInput
v1.0.3Updated 19 Oct 2026Money field with a currency symbol prefix and locale-aware thousands/decimal separators probed from Intl.NumberFormat, so th-TH, en-US and de-DE each format correctly. onAccept hands back both the numeric value and the display string, and scale/min/max control the fractional digits and clamp the amount as it is typed. Right-aligned monospace tabular figures; ships THB, USD, EUR, GBP and JPY presets.
Preview
Live · 5 stories▸Why this is recommendedformmaskinputcurrency+7
CurrencyInput — THB + USD.
- ✓Entering a price or amount in Thai Baht
- ✓Annual revenue or budget fields on an onboarding form
- ✓Invoice line item amounts
- ✓Salary or payment amount entry
- ✓Locale-formatted currency input for a multi-currency product
- THB / USD / EUR / GBP / JPY presets with symbol prefix
- Separators derived from Intl.NumberFormat per locale (th-TH, en-US, de-DE, en-GB, ja-JP)
- onAccept returns (numericValue, displayValue) — no manual parsing
- `scale` controls fractional digits (set 0 for JPY); padFractionalZeros and normalizeZeros on
- `min` / `max` clamp the value while typing
- Right-aligned monospace tabular-nums for scannable amount columns
- ✕Plain numeric entry with steppers (use NumberInput)
- ✕Percentages or non-money numbers (use NumberInput)
- ✕Free-form text (use Input)
- ✕Currencies outside THB / USD / EUR / GBP / JPY without extending the preset table
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
currencyCurrency preset driving symbol and locale (default 'THB')
—valueCurrent amount
—onAcceptFires with both the parsed number and the formatted string
—scaleFractional digits (default 2; use 0 for JPY)
—minMinimum value; clamped while typing
—maxMaximum value; clamped while typing
—disabledDisables the field
—