InputNumber

Import via Module

import { InputNumber } from 'primereact/inputnumber';
 

Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
 

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} maxFractionDigits={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} />
 

Properties

Events

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Accessibility

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

Dependencies

None.