React InputNumber

React InputNumber is an input component to provide numerical input.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { InputNumber } from 'primereact/inputnumber';

Getting Started

InputNumber is used as a controlled input with value and onValueChange properties. Component always provides a number type although formatting on the input is a string.

<InputNumber value={value} onValueChange={(e) => setValue(e.value)} />

Decimal Mode

Format is defined using the mode property, "decimal" is the default value allowing only integers when there is no other configuration.

<InputNumber value={value} onValueChange={(e) => setValue(e.value)}  mode="decimal" />

Fractions are configured with the minFractionDigits property. Optionally maxFractionDigits can be used to defined a boundary for the maximum digits.

<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} mode="decimal" minFractionDigits={2} />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} mode="decimal" minFractionDigits={2} maxFracionDigits={2} />

locale option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per BCP Language Tag.

User Locale
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} mode="decimal" minFractionDigits={2} />

United State Locale
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} mode="decimal" locale="en-US" minFractionDigits={2}/>

German Locale
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} mode="decimal" locale="de-DE" minFractionDigits={2}/>

Indian Locale
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} mode="decimal" locale="en-IN" minFractionDigits={2} />

Currency

Currency formatting is specified by setting the mode option to currency and currency property. In addition currencyDisplay option allows how the currency is displayed, valid values are "symbol" (default) or "code".

United States
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />

Germany
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />

India
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN"/>

Japan
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP"/>

Prefix and Suffix

Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.

Mile
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} suffix=" mi" />

Percent
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} prefix="%" />

Expiry
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} prefix="Expires in " suffix=" days" />

Temperature
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} prefix="&uarr; " suffix="℃" min={0} max={40} />

Buttons

Spinner buttons is enabled using the showButtons options and layout is defined with the buttonLayout. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up and down arrow keys can be used to spin the values with keyboard.

Stacked
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} showButtons mode="currency" currency="USD" />

Horizontal
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} showButtons buttonLayout="horizontal"
    decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR"/>

Vertical
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} mode="decimal" showButtons buttonLayout="vertical" style={{width: '6em'}}
    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />

Step

Step factor is 1 by default and can be customized with step option.

<InputNumber value={value} onValueChange={(e) => setValue(e.value)} step={0.25} />

Min and Max Boundaries

Value to be entered can be restricted by configuring the min and max options.

<InputNumber value={value} onValueChange={(e) => setValue1(e.value)} min={0} max={100} />

Theming

InputNumber supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact InputNumber showcase for demos and documentation.