InputNumber

InputNumber is an input component to provide numerical input.

Import#


import { InputNumber } from 'primereact/inputnumber';
         

Numerals#

InputNumber is used as a controlled input with value and onValueChange properties.


<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} />
 

Locale#

Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user 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} />
 

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.


<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" />
 

Prefix & Suffix#

Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.


<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="&uarr; " suffix="℃" min={0} max={40} />
 

Buttons#

Spinner buttons are enabled using the showButtons property and layout is defined with the buttonLayout.


<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" />
 

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" />
 

Float Label#

A floating label appears on top of the input field when focused.


<span className="p-float-label">
    <InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
    <label htmlFor="number-input">Number</label>
</span>
 

Invalid#

Invalid state style is added using the p-invalid class to indicate a failed validation.


<InputNumber className="p-invalid" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
 

Disabled#

When disabled is present, the element cannot be edited and focused.


<InputNumber value={value} disabled prefix="%" />
 

Form#

Compatibility with popular React form libraries.

Formik#

Formik is a popular library for handling forms in React.

 

<Toast ref={toast} />
<InputNumber
    inputId="in_year"
    name="year"
    value={formik.values.year}
    onValueChange={(e) => {
        formik.setFieldValue('year', e.value);
    }}
    useGrouping={false}
    inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })}
    pt={{
        input: {
            root: { autoComplete: 'off' }
        }
    }}
/>
{getFormErrorMessage('year')}
<Button label="Submit" type="submit" icon="pi pi-check" />
         

Hook Form#

React Hook Form is another popular React library to handle forms.

 

<Toast ref={toast} />
<Controller
    name="year"
    control={form.control}
    rules={{
        required: 'Enter a valid year.',
        validate: (value) => (value >= 1960 && value <= 2050) || 'Enter a valid year.'
    }}
    render={({ field, fieldState }) => (
        <>
            <label htmlFor={field.name}>Enter a year between 1960-2050.</label>
            <InputNumber id={field.name} inputRef={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} />
            {getFormErrorMessage(field.name)}
        </>
    )}
/>
<Button label="Submit" type="submit" icon="pi pi-check" />
         

Style#

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

NameElement
p-inputnumberContainer element
p-inputnumber-stackedContainer element with stacked buttons.
p-inputnumber-horizontalContainer element with horizontal buttons.
p-inputnumber-verticalContainer element with vertical buttons.
p-inputnumber-inputInput element
p-inputnumber-buttonInput element
p-inputnumber-button-upIncrement button
p-inputnumber-button-downDecrement button
p-inputnumber-button-iconButton icon
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility#

Screen Reader

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.


<label htmlFor="price">Price</label>
<InputNumber inputId="price" />

<span id="label_number">Number</span>
<InputNumber aria-labelledby="label_number" />

<InputNumber aria-label="Number" />
     

Keyboard Support

KeyFunction
tabMoves focus to the input.
up arrowIncrements the value.
down arrowDecrements the value.
homeSet the minimum value if provided.
endSet the maximum value if provided.
                              PrimeReact 9.6.5-SNAPSHOT by PrimeTek