useInputNumber

Usage#

import { useInputNumber } from '@primereact/headless/inputnumber';
 
const { rootProps, state } = useInputNumber({
    defaultValue: 0
});
 
return <input {...rootProps} />;

useInputNumber handles numeric parsing, formatting, keyboard-driven increment/decrement, and boundary enforcement — see Primitive for a component-based API.

Features#

• rootProps returns spread-ready attributes including role="spinbutton", ARIA value properties, and all event handlers
• state.value and state.formattedValue track the raw numeric and display-formatted values
• increment, decrement, stepUp, and stepDown methods for programmatic and UI-driven value changes
• maxBoundry() and minBoundry() helpers for checking boundary state
• Auto-repeating spin on pointer hold with accelerating intervals

Behavior#

Default Value#

Set defaultValue for uncontrolled initial value.

const inputnumber = useInputNumber({ defaultValue: 42 });

Controlled#

Pass value with onValueChange for controlled usage.

const [value, setValue] = React.useState(0);
 
const inputnumber = useInputNumber({
    value,
    onValueChange: (e) => setValue(e.value)
});

Min and Max#

Set min and max to enforce boundaries. Values are clamped on blur and during spin.

const inputnumber = useInputNumber({ min: 0, max: 100 });

Step#

Set step to control the increment per spin operation. Defaults to 1.

const inputnumber = useInputNumber({ step: 5 });

Locale and Grouping#

Set locale for locale-aware formatting and useGrouping to toggle grouping separators.

const inputnumber = useInputNumber({
    locale: 'de-DE',
    useGrouping: true
});

Currency Mode#

Set mode to 'currency' and specify the currency code for monetary formatting.

const inputnumber = useInputNumber({
    mode: 'currency',
    currency: 'USD',
    locale: 'en-US'
});

Fraction Digits#

Control decimal precision with minFractionDigits and maxFractionDigits.

const inputnumber = useInputNumber({
    minFractionDigits: 2,
    maxFractionDigits: 4
});

Prefix and Suffix#

Add custom text around the number with prefix and suffix.

const inputnumber = useInputNumber({
    prefix: '$',
    suffix: ' USD'
});

Highlight on Focus#

Set highlightOnFocus to automatically select the input text when the field receives focus.

const inputnumber = useInputNumber({ highlightOnFocus: true });

Custom Styling with Data Attributes#

[data-scope='inputnumber'][data-part='root'] { ... }

API#

useInputNumber#

Accessibility#

See InputNumber Primitive for WAI-ARIA compliance details and keyboard support.