| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| decimalScale | boolean | 0 | 10 | 8 | 1 | 2 | 3 | 4 | 14 | 5 | 6 | 7 | 12 | 9 | 11 | 13 | false | true | |
| defaultValue | false | Initial value of an uncontrolled component | ||
| error | boolean | false | Controls the error state of the | |
| fillDecimalScale | false |
| ||
| locale | false | en-US | A string with a BCP 47 language tag or an array of such strings which specifies number formatting. | |
| prefix | string | false | A string which is added to input as a prefix. | |
| qa | QaTags | false | ||
| step | number | false | 0 | A stepping interval which is used in incrementer. Zero value turns off incrementer. |
| suffix | string | false | A string which is added to input as a suffix | |
| value | false | Value of a controlled component. If value is a string, the string MUST be formatted with the decimal separator to the locale. | ||
| onChange | Function | false |
|
If decimalScale is 0 then NumberInput will only accept whole numbers.
In order to enter decimal numbers, set the decimalScale to the number of allowed fraction digits. Maximum allowed is 14.
If a decimal number is neccesary but the number of digits after the decimal point is not important, setting decimalScale to true will enable the max size.
To have the fraction part of a decimal number pad itself with zeros to match the decimalScale, set the fillDecimalScale to always.
To have the fraction part of the decimal number fill with zeroes to match the decimalScale when blur occurs, set fillDecimalScale to onBlur.
For example, the value "1234567890.123456" set to value/defaultValue props or copied and pasted into input will be initially truncated to "1234567.12345600" (integer part truncated from 1234567890 to 1234567, the fraction is not truncated but padded by zeros to fixed scale) and then formatted.
Look to set the decimalScale to a low number when using one of the two fill with zeros feature. "Nine trillion" is the highest stable value with a 2 decimal precision.
For example, value of "1234567890.123456" set to value/defaultValue props or copied and pasted into input will be initially truncated to "1234567890.12345" and then formatted.
To have some string preceeding input's value set it to prefix prop.
To have some string follwing input's value set it to suffix prop.
To have buttons that increment, set a step to a number bigger then 0. Pressing the buttons or up/down arrow keys will change the value by the step. If using a step between 0 and 1, be sure to specify a decimalScale.
The first argument to the onChange handler contains an object of the direct input string value (value) and a parsed number (parsedNumber).
The value string format will be dependent on the locale.
When empty, the parsedNumber will be null.
Sometimes a user can leave the value in an invalid state when blurring from the input, onChange will be called again with a 'cleaned' value.
This happens when an unnecessary trailing decimal sepataror is present:
This also happens when an unnecessary solo negative sign - is present.
The maximum number of fraction digits to use. Possible values range from 0 to 14. Setting to true will result in the maximum size, setting to false will allow 0 decimals, whole numbers only.
true
10.19.0