NumberInput

React

Usage

Props

NameTypeRequiredDefaultDescription
decimalScaleoneOfTypefalsetrue
The maximum number of fraction digits to use. Possible values range from 0 to 15. Setting to true will result in the maximum size, setting to false will allow 0 decimals, whole numbers only.
oneOf: [number, boolean]
defaultValueoneOfTypefalse
Initial value of an uncontrolled component
oneOf: [string, number]
errorbooleanfalsefalse
If
true
, means that field has an error.
fillDecimalScaleoneOffalsenone
none
prevents from adding zeros to match given
decimalScale
.
always
automatically adds zeros to match given
decimalScale
.
onBlur
automatically adds zeros to match given
decimalScale
when input has lost focus.
oneOf: ['none', 'onBlur', 'always']
localeoneOfTypefalseen-US
A string with a BCP 47 language tag or an array of such strings which specifies number formatting.
oneOf: [string, arrayOf]
onChangefunctionfalse
(value: ValueChange) => void
, where
ValueChange
is an object
{ value: string, parsedNumber: number | null }
.
prefixstringfalse
A string which is added to input as a prefix.
stepnumberfalse0
A stepping interval which is used in incremetor. Zero value turns off incrementer.
valueoneOfTypefalse
Value of a controlled component
oneOf: [string, number]

Integer number

If decimalScale is 0 then NumberInput will only accept whole numbers.

Decimal number

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.

fillDecimalScale

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.

Prefix

To have some string preceeding input's value set it to prefix prop.

Incrementer

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.

onChange

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.

Demo