File: inputnumber.md | Updated: 11/15/2025
Introducing PrimeReact v11 Alpha 🥁Learn More
SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH
InputNumber is an input component to provide numerical input.
Import#
import { InputNumber } from 'primereact/inputnumber';
Copy
Numerals#
InputNumber is used as a controlled input with value and onValueChange properties.
Integer Only
Without Grouping
Min-Max Fraction Digits
Min-Max Boundaries
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} useGrouping={false} />
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} minFractionDigits={2} maxFractionDigits={5} />
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} min={0} max={100} />
Copy
Locale#
Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user locale.
User Locale
United States Locale
German Locale
Indian Locale
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} minFractionDigits={2} />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} locale="en-US" minFractionDigits={2} />
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} locale="de-DE" minFractionDigits={2} />
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} locale="en-IN" minFractionDigits={2} />
Copy
Currency#
Monetary values are enabled by setting mode property as currency. In this setting, currency property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.
United States
Germany
India
Japan
<InputNumber inputId="currency-us" value={value1} onValueChange={(e) => setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />
<InputNumber inputId="currency-germany" value={value2} onValueChange={(e) => setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />
<InputNumber inputId="currency-india" value={value3} onValueChange={(e) => setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
<InputNumber inputId="currency-japan" value={value4} onValueChange={(e) => setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP" />
Copy
Prefix & Suffix#
Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.
Mile
Percent
Expiry
Temperature
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} suffix=" mi" />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} prefix="%" />
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} prefix="Expires in " suffix=" days" />
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} prefix="↑ " suffix="℃" min={0} max={40} />
Copy
Buttons#
Spinner buttons are enabled using the showButtons property and layout is defined with the buttonLayout.
Stacked
Min-Max Boundaries
Horizontal with Step
<InputNumber value={value1} onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)} showButtons mode="currency" currency="USD" />
<InputNumber value={value3} onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)} mode="decimal" showButtons min={0} max={100} />
<InputNumber value={value2} onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)} showButtons buttonLayout="horizontal" step={0.25}
decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
mode="currency" currency="EUR" />
Copy
Vertical#
Buttons can also placed vertically by setting buttonLayout as vertical.
<InputNumber value={value} onValueChange={(e) => setValue(e.value)} showButtons buttonLayout="vertical" style={{ width: '4rem' }}
decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
Copy
Float Label#
A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
Number
<FloatLabel>
<InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
<label htmlFor="number-input">Number</label>
</FloatLabel>
Copy
Filled#
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<InputNumber variant="filled" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
Copy
Invalid#
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
<InputNumber invalid value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
Copy
Disabled#
When disabled is present, the element cannot be edited and focused.
<InputNumber value={value} disabled prefix="%" />
Copy
Accessibility#
Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element uses spinbutton role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Make sure to assign unique identifiers for the _span_and input.
<label htmlFor="input-price">Price</label>
<InputNumber id="span-price" inputId="input-price" />
<span id="label_number">Number</span>
<InputNumber aria-labelledby="label_number" />
<InputNumber aria-label="Number" />
Copy
| Key | Function | | --- | --- | | tab | Moves focus to the input. | | up arrow | Increments the value. | | down arrow | Decrements the value. | | home | Set the minimum value if provided. | | end | Set the maximum value if provided. |
Import
Numerals
Locale
Currency
Prefix & Suffix
Buttons
Vertical
Float Label
Filled
Invalid
Disabled
Accessibility
PrimeReact 10.9.7 by PrimeTek