InputNumber

An unstyled numeric input with formatting, locale support, and spin button behavior.

Build fully custom numeric inputs with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use InputNumber with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Locale-aware number formatting with decimal, currency, and custom prefix/suffix modes
Boundary enforcement via min and max with keyboard-driven increment and decrement
Configurable fraction digit precision and rounding modes
Auto-repeating spin on pointer hold with accelerating intervals

Usage#

import { InputNumber } from 'primereact/inputnumber';

<InputNumber defaultValue={42723} />

Behavior#

Polymorphic Rendering#

Use as to change the rendered input element.

<InputNumber as="input" defaultValue={0} />

Render Function Children#

InputNumber accepts a render function providing access to the component instance.

<InputNumber>{(instance) => <span>{instance.state.formattedValue}</span>}</InputNumber>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

InputNumber#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputNumberRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputNumberRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputNumberRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputNumberRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputNumberRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`number`	—
Specifies whether a inputnumber should be checked or not.
`defaultValue`	`number`	—
Specifies whether a inputnumber should be checked or not.
`name`	`string`	—
The name attribute for the element, typically used in form submissions.
`format`	`boolean`	`true`
Whether to format the value.
`locale`	`string`	—
Locale to be used in formatting.
`localeMatcher`	`"lookup"` \| `"best fit"`	`'best fit'`
The locale matching algorithm to use. Possible values are 'lookup' and 'best fit'; the default is 'best fit'. See [Locale Negotation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_negotiation) for details.
`mode`	`"decimal"` \| `"currency"`	`decimal`
Defines the behavior of the component.
`prefix`	`string`	—
Text to display before the value.
`suffix`	`string`	—
Text to display after the value.
`currency`	`string`	—
The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as 'USD' for the US dollar, 'EUR' for the euro, or 'CNY' for the Chinese RMB. There is no default value; if the style is 'currency', the currency property must be provided.
`currencyDisplay`	`"symbol"` \| `"code"` \| `"name"` \| `"narrowSymbol"`	—
How to display the currency in currency formatting. Possible values are 'symbol' to use a localized currency symbol such as €, 'code' to use the ISO currency code, 'name' to use a localized currency name such as 'dollar'.
`useGrouping`	`boolean`	`true`
Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
`minFractionDigits`	`number`	—
The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
`maxFractionDigits`	`number`	—
The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
`roundingMode`	`"expand"` \| `"ceil"` \| `"floor"` \| `"trunc"` \| `"halfCeil"` \| `"halfFloor"` \| `"halfExpand"` \| `"halfTrunc"` \| `"halfEven"`	—
How decimals should be rounded. [further information](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode).
`min`	`number`	—
Minimum boundary value.
`max`	`number`	—
Maximum boundary value.
`step`	`number`	`1`
Step factor to increment/decrement the value.
`allowEmpty`	`boolean`	`true`
Determines whether the input field is empty.
`highlightOnFocus`	`boolean`	`false`
Highlights automatically the input value.
`invalid`	`boolean`	`false`
When present, it specifies that the component should have invalid state style.
`disabled`	`boolean`	`false`
When present, it specifies that the component should be disabled.
`readOnly`	`boolean`	`false`
When present, it specifies that an input field is read-only.
`onChange`	`(event: useInputNumberValueChangeEvent) => void`	—
Callback to invoke when value changes.
`size`	`"small"` \| `"large"`	—
Defines the size of the component.
`variant`	`"outlined"` \| `"filled"`	—
Specifies the input variant of the component.
`fluid`	`boolean`	—
Spans 100% width of the container when enabled.
`layout`	`"horizontal"` \| `"vertical"` \| `"stacked"`	`'stacked'`
Layout of the increment/decrement buttons.
`onValueChange`	`(event: InputNumberRootValueChangeEvent) => void`	—
Callback fired when the input number's value changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputnumber"`
`data-part`	`"root"`

Accessibility#

Value to describe the component can be provided with a label tag and id, or by using aria-labelledby and aria-label. The input element uses the spinbutton role and includes aria-valuemin, aria-valuemax, and aria-valuenow.

Keyboard Support#

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.