Currency Amount Input With Picker

When to use it

Use it for prices, invoices and budgets, where "1.234,50" and "1,234.50" both appear, yen has no decimals, and the application needs 123450 and "EUR", not a string.

Do not use it when the currency is fixed. Use a plain formatted number input.

Installation

Props

| Prop | Type | Default | Description | | --------------- | --------------------- | ---------------------------------- | ---------------------------------------------------- | --------------------------------------- | | currencies | string[] | USD, EUR, GBP, JPY, KWD, INR | ISO 4217 codes offered. | | value | { minor: number \\ | null; currency: string } | - | The amount in minor units (controlled). | | defaultValue | { minor, currency } | { minor: null, currency: first } | Initial value. | | onValueChange | (value) => void | - | Runs when the parsed amount or the currency changes. | | locale | string | browser | Locale for display formatting. | | label | string | Amount | Names the group and the number field. |

Accessibility

• The group has role="group" and the label; the number field is inputmode="decimal" with aria-label <label> amount; the currency button is labelled Currency, USD.
• parseAmount accepts both 1,234.50 and 1.234,50 by treating the last separator as the decimal mark when it is followed by one or two (or the currency's number of) digits.
• On blur the text becomes the formatted amount; a value that cannot be parsed keeps the text and sets aria-invalid.
• Changing the currency keeps the typed number and re-rounds it to the new currency's decimals (JPY has none).

Testing

The pattern ships with a Testing Library test (currency-amount-input-with-picker.test.tsx) that covers parsing both decimal styles, minor units per currency, formatting on blur and keeping the number across currencies.