uwc-amount-field components let users input and edit amounts, with optional formatting and currency display.The amount field input component allows input and display of numbers with a number of options for CurrencySymbol, SymbolPosition, locale.
Transact's faster input multipliers by adding a suffix to the numeric data entered:
- Thousands T: 1000,
- Millions M: 1000000,
- Billions B: 1000000000
Based on the CurrencyCode passed into the component, the CurrencySymbol, SymbolPosition, locale and the default number of decimal points are defaulted as per the table below.
This component uses Intl.NumberFormat to enable language-sensitive number formatting with the help of locale passed in as argument
| CurrencyCode | locale | CurrencySymbol | SymbolPosition | Default decimal points |
|---|---|---|---|---|
| AED | ar-AE | د.إ, | Right | 2 |
| ARS | es | $ | Left | 2 |
| AUD | en | $ | Left | 2 |
| BRL | pt | R$ | Left | 2 |
| CAD | en-CA | $ | Left | 2 |
| CAD | fr-CA | $ | Right | 2 |
| CLP | es-CL | $ | Left | 0 |
| CNY | zh-CN | ¥ | Left | 2 |
| COP | en | $ | Left | 2 |
| CZK | cs | Kč | Right | 2 |
| DKK | da | kr. | Left | 2 |
| EUR | da | € | Left | 2 |
| HKD | en-HK | HK$ | Left | 2 |
| HUF | hu | Ft | Right | 2 |
| INR | en-IN | ₹ | Left | 2 |
| ILS | he-IL | ₪ | Left | 2 |
| JPY | ja-JP | ¥ | Left | 0 |
| KRW | ko | ₩ | Left | 0 |
| MYR | ms-MY | RM | Left | 2 |
| MXN | es-MX | $ | Left | 2 |
| MAD | ar-MA | .د.م. | Right | 2 |
| NZD | en-NZ | $ | Left | 2 |
| NOK | nn-NO | kr. | Left | 2 |
| PHP | en-PH | ₱ | Left | 2 |
| PLN | pl-PL | zł | Right | 2 |
| RUB | ru-RU | p. | Right | 2 |
| SAR | ar | ﷼ | Right | 2 |
| SGD | en-SG | $ | Left | 2 |
| ZAR | en-ZA | R | Left | 2 |
| SEK | sv-SE | kr | Right | 2 |
| CHF | gsw-CH | fr. | Left | 2 |
| TWD | zh-Hant-TW | 元 | Left | 2 |
| THB | th-TH | ฿ | Right | 2 |
| TRY | tr-TR | ₺ | Right | 2 |
| GBP | en-GB | £ | Left | 2 |
| USD | en-US | $ | Left | 2 |
| VND | vi | ₫ | Right | 0 |
It is possible to override the default configuration above, by passing in an alternative configuration object. An example is shown below, which shows the use of GBP as the currency symbol (instead of £). It should be noted that passing in a configuration property replaces the whole table above, it does not attempt to merge.
The <uwc-amount-field> component inherits from <uwc-text-field>, which itself inherits from mwc-text-field (Material Web Components), which itself extends the native HTML <input> element.
- Supports most standard
<input>attributes and properties. - Behaves similarly to an
<input>field of type=number with added styling and functionality frommwc-text-field. - Can be used interchangeably with an
<input>in terms of data binding and form submission.