Properties
| Property | Type | Description |
|---|---|---|
asNumber | boolean | (optional) Set to true to automatically set a number mask based on the given or inherited locale. |
asPercent | boolean | (optional) Set to true to automatically set a number mask with a percentage sign based on the given or inherited locale. |
asCurrency | boolean string | (optional) Set to true to use NOK or give it a currency code e.g. USD to automatically set a currency mask based on the given or inherited locale. |
maskOptions | object | (optional) Use it to manipulate internal masks. You can use it instead of e.g. numberMask or currencyMask. All options are listed below. |
numberMask | boolean object | (optional) Set to true to enable the default numbers formatting – or give an object containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. |
currencyMask | boolean object | (optional) Set to true or set the valuta (currencyMask="kr") to enable a custom currency mask – or give an object containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to kr. |
numberFormat | object | (optional) Use an object with NumberFormat. |
locale | string | (optional) Define the locale to be used in the asNumber or asCurrency masked. It will be inherited from the Eufemia Provider if not given. Defaults to nb-NO. |
mask | RegExp Array<RegExp | string> | (optional) A mask defined as an array of RegExp and string tokens (e.g. [/\d/, /\d/, " ", /\d/, /\d/]) or a single RegExp. Defaults to number mask. |
allowOverflow | boolean | (optional) Allow users to keep typing after the defined mask has been filled. Extra characters will be appended without masking. |
overwriteMode | string function | (optional) Control how overwriting characters is handled; shift (default) moves to the next slot while replace stays on the current slot. |
showMask | boolean | (optional) Show mask when input is empty and has no focus. Defaults to false. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Input | Various | (optional) All Input properties are supported. |
Number mask properties
The number mask is used for all kinds of number based masks, like:
Locale based masks:
asNumberasCurrencyasPercent
Static masks:
numberMaskcurrencyMask
You can maskOptions to manipulate the options.
Defaults to Norwegian number format.
| Property | Type | Description |
|---|---|---|
prefix | string | (optional) What to display before the amount. Defaults to an empty string. |
suffix | string | (optional) What to display after the amount. Defaults to an empty string. |
thousandsSeparatorSymbol | string | (optional) Character with which to separate thousands. Defaults to ' '. |
allowDecimal | boolean | (optional) Whether or not to allow the user to enter a fraction with the amount. Defaults to false. |
decimalSymbol | string | (optional) Character that will act as a decimal point. Defaults to ','. |
decimalLimit | number | (optional) How many digits to allow after the decimal. Defaults to 2. |
integerLimit | number | (optional) Limit the length of the integer number. Defaults to null for unlimited. |
allowNegative | boolean | (optional) Whether or not to allow negative numbers. Defaults to true. |
disallowLeadingZeroes | boolean | (optional) Whether or not to allow leading zeroes during typing. A leading zero is any 0 digit that comes before the first nonzero digit in a number string in positional notation - wikipedia. Defaults to false. |
Custom number mask usage
The number mask is included and can be set with the numberMask property.
// 1. Use the desired configurationsconst numberMask = {prefix: '',suffix: ',- kr'}// 2. Then pass 'numberMask' to the InputMasked component as the numberMask<InputMasked numberMask={numberMask} ... />