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

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

Defines passthrough(pt) options of InputNumber component.

label	type	description
root	InputNumberPassThroughType<InputHTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.
pcInputText	InputNumberPassThroughType<InputHTMLAttributes<HTMLInputElement>>	Used to pass attributes to the input's DOM element.

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.