InputNumber

InputNumber is used to enter numeric values.

Usage#

import { InputNumber } from 'primereact/inputnumber';
<InputNumber></InputNumber>

Examples#

Numerals#

InputNumber supports decimal numbers with precision control.

numerals-demo.tsx
'use client';

import { InputNumber } from 'primereact/inputnumber';
import { Label } from 'primereact/label';

export default function NumeralsDemo() {
    return (
        <div className="flex flex-wrap gap-4">
            <div className="flex-auto">
                <Label htmlFor="integeronly" className="font-bold block mb-2">
                    Integer Only
                </Label>
                <InputNumber defaultValue={42723} inputId="integeronly" fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="withoutgrouping" className="font-bold block mb-2">
                    Without Grouping
                </Label>
                <InputNumber defaultValue={58151} inputId="withoutgrouping" useGrouping={false} fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="minmaxfraction" className="font-bold block mb-2">
                    Min-Max Fraction Digits
                </Label>
                <InputNumber defaultValue={2351.35} inputId="minmaxfraction" minFractionDigits={2} maxFractionDigits={5} fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="minmax" className="font-bold block mb-2">
                    Min-Max Boundaries
                </Label>
                <InputNumber defaultValue={50} inputId="minmax" min={0} max={100} fluid />
            </div>
        </div>
    );
}

Locale#

Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user locale.

locale-demo.tsx
'use client';

import { InputNumber } from 'primereact/inputnumber';
import { Label } from 'primereact/label';

export default function LocaleDemo() {
    return (
        <div className="flex flex-wrap gap-4">
            <div className="flex-auto">
                <Label htmlFor="locale-user" className="font-bold block mb-2">
                    User Locale
                </Label>
                <InputNumber defaultValue={151351} inputId="locale-user" minFractionDigits={2} fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="locale-us" className="font-bold block mb-2">
                    United States Locale
                </Label>
                <InputNumber defaultValue={115744} inputId="locale-us" locale="en-US" minFractionDigits={2} fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="locale-german" className="font-bold block mb-2">
                    German Locale
                </Label>
                <InputNumber defaultValue={635524} inputId="locale-german" locale="de-DE" minFractionDigits={2} fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="locale-indian" className="font-bold block mb-2">
                    Indian Locale
                </Label>
                <InputNumber defaultValue={732762} inputId="locale-indian" locale="en-IN" minFractionDigits={2} fluid />
            </div>
        </div>
    );
}

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.

currency-demo.tsx
'use client';

import { InputNumber } from 'primereact/inputnumber';
import { Label } from 'primereact/label';

export default function CurrencyDemo() {
    return (
        <div className="flex flex-wrap gap-4">
            <div className="flex-auto">
                <Label htmlFor="currency-us" className="font-bold block mb-2">
                    United States
                </Label>
                <InputNumber defaultValue={1500} inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="currency-germany" className="font-bold block mb-2">
                    Germany
                </Label>
                <InputNumber defaultValue={2500} inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="currency-india" className="font-bold block mb-2">
                    India
                </Label>
                <InputNumber
                    defaultValue={4250}
                    inputId="currency-india"
                    mode="currency"
                    currency="INR"
                    currencyDisplay="code"
                    locale="en-IN"
                    fluid
                />
            </div>
            <div className="flex-auto">
                <Label htmlFor="currency-japan" className="font-bold block mb-2">
                    Japan
                </Label>
                <InputNumber defaultValue={5002} inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
            </div>
        </div>
    );
}

Prefix & Suffix#

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

prefix-suffix-demo.tsx
'use client';

import { InputNumber } from 'primereact/inputnumber';
import { Label } from 'primereact/label';

export default function PrefixSuffixDemo() {
    return (
        <div className="flex flex-wrap gap-4">
            <div className="flex-auto">
                <Label htmlFor="mile" className="font-bold block mb-2">
                    Mile
                </Label>
                <InputNumber defaultValue={20} inputId="mile" suffix=" mi" fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="percent" className="font-bold block mb-2">
                    Percent
                </Label>
                <InputNumber defaultValue={50} inputId="percent" prefix="%" fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="expiry" className="font-bold block mb-2">
                    Expiry
                </Label>
                <InputNumber defaultValue={10} inputId="expiry" prefix="Expires in " suffix=" days" fluid />
            </div>
            <div className="flex-auto">
                <Label htmlFor="temperature" className="font-bold block mb-2">
                    Temperature
                </Label>
                <InputNumber defaultValue={20} inputId="temperature" prefix="&uarr; " suffix="℃" min={0} max={40} fluid />
            </div>
        </div>
    );
}

Buttons#

Spinner buttons are enabled using the InputGroup or IconField components.

buttons-demo.tsx
'use client';

import { useInputNumber } from '@primereact/headless/inputnumber';
import type { InputNumberInstance, useInputNumberValueChangeEvent } from '@primereact/types/shared/inputnumber';
import { Button } from 'primereact/button';
import { IconField } from 'primereact/iconfield';
import { InputGroup } from 'primereact/inputgroup';
import { InputNumber } from 'primereact/inputnumber';
import { Label } from 'primereact/label';
import * as React from 'react';

export default function ButtonsDemo() {
    const [value1, setValue1] = React.useState(20);
    const [value2, setValue2] = React.useState(25);
    const [value3, setValue3] = React.useState(10.25);

    const inputRef1 = React.useRef<InputNumberInstance>(null);
    const inputRef2 = React.useRef<InputNumberInstance>(null);
    const inputRef3 = React.useRef<InputNumberInstance>(null);

    const inputNumber1 = useInputNumber({
        target: inputRef1,
        value: value1,
        mode: 'currency',
        currency: 'USD',
        onValueChange: (e: useInputNumberValueChangeEvent) => setValue1(e.value)
    });

    const inputNumber2 = useInputNumber({
        target: inputRef2,
        value: value2,
        onValueChange: (e: useInputNumberValueChangeEvent) => setValue2(e.value)
    });

    const inputNumber3 = useInputNumber({
        target: inputRef3,
        value: value3,
        mode: 'currency',
        currency: 'EUR',
        onValueChange: (e: useInputNumberValueChangeEvent) => setValue3(e.value)
    });

    return (
        <div className="flex flex-wrap gap-4">
            <div className="flex-auto">
                <Label htmlFor="stacked-buttons" className="font-bold block mb-2">
                    Stacked
                </Label>
                <InputGroup>
                    <InputNumber
                        ref={inputRef1}
                        value={value1}
                        inputId="stacked-buttons"
                        mode="currency"
                        currency="USD"
                        fluid
                        onValueChange={inputNumber1?.onValueChange}
                    />
                    <InputGroup.Addon className="flex-col">
                        <Button
                            severity="secondary"
                            onPointerDown={(e: React.PointerEvent<HTMLButtonElement>) => inputRef1.current?.increment(e, 1)}
                            onPointerUp={inputRef1.current?.stopSpin}
                            className="py-0 text-[.5rem]"
                        >
                            <i className="pi pi-angle-up" />
                        </Button>
                        <Button
                            severity="secondary"
                            onPointerDown={(e: React.PointerEvent<HTMLButtonElement>) => inputRef1.current?.decrement(e, -1)}
                            onPointerUp={inputRef1.current?.stopSpin}
                            className="py-0 text-[.5rem]"
                        >
                            <i className="pi pi-angle-down" />
                        </Button>
                    </InputGroup.Addon>
                </InputGroup>
            </div>

            <div className="flex-auto">
                <Label htmlFor="minmax-buttons" className="font-bold block mb-2">
                    Min-Max
                </Label>
                <InputGroup>
                    <InputGroup.Addon
                        as={Button}
                        severity="secondary"
                        iconOnly
                        disabled={value2 === 100}
                        onPointerDown={(e: React.PointerEvent<HTMLButtonElement>) => inputRef2.current?.increment(e, 1)}
                        onPointerUp={inputRef2.current?.stopSpin}
                    >
                        <i className="pi pi-plus"></i>
                    </InputGroup.Addon>
                    <InputNumber
                        ref={inputRef2}
                        value={value2}
                        inputId="minmax-buttons"
                        fluid
                        min={0}
                        max={100}
                        onValueChange={inputNumber2?.onValueChange}
                    />
                    <InputGroup.Addon
                        as={Button}
                        severity="secondary"
                        iconOnly
                        disabled={value2 === 0}
                        onPointerDown={(e: React.PointerEvent<HTMLButtonElement>) => inputRef2.current?.decrement(e, -1)}
                        onPointerUp={inputRef2.current?.stopSpin}
                    >
                        <i className="pi pi-minus"></i>
                    </InputGroup.Addon>
                </InputGroup>
            </div>

            <div className="flex-auto">
                <Label htmlFor="horizontal-buttons" className="font-bold block mb-2">
                    Horizontal with Step
                </Label>
                <IconField>
                    <IconField.Icon
                        onPointerDown={(e: React.PointerEvent<HTMLButtonElement>) => inputRef3.current?.increment(e, 0.25)}
                        onPointerUp={inputRef3.current?.stopSpin}
                    >
                        <i className="pi pi-plus"></i>
                    </IconField.Icon>
                    <InputNumber
                        ref={inputRef3}
                        value={value3}
                        inputId="horizontal-buttons"
                        fluid
                        mode="currency"
                        currency="EUR"
                        onValueChange={inputNumber3?.onValueChange}
                    />
                    <IconField.Icon
                        onPointerDown={(e: React.PointerEvent<HTMLButtonElement>) => inputRef3.current?.decrement(e, -0.25)}
                        onPointerUp={inputRef3.current?.stopSpin}
                    >
                        <i className="pi pi-minus"></i>
                    </IconField.Icon>
                </IconField>
            </div>
        </div>
    );
}

Vertical#

Buttons can also placed vertically.

vertical-demo.tsx
'use client';

import { useInputNumber } from '@primereact/headless/inputnumber';
import type { InputNumberInstance, useInputNumberValueChangeEvent } from '@primereact/types/shared/inputnumber';
import { Button } from 'primereact/button';
import { InputGroup } from 'primereact/inputgroup';
import { InputNumber } from 'primereact/inputnumber';
import * as React from 'react';

export default function VerticalDemo() {
    const [value, setValue] = React.useState(50);

    const inputRef = React.useRef<InputNumberInstance>(null);

    const inputNumber = useInputNumber({
        target: inputRef,
        value: value,
        onValueChange: (e: useInputNumberValueChangeEvent) => setValue(e.value)
    });

    return (
        <div className="flex justify-center">
            <InputGroup className="flex-col w-[3rem]">
                <InputGroup.Addon
                    as={Button}
                    severity="secondary"
                    iconOnly
                    className="w-[3rem] border-r-[var(--p-inputtext-border-color)] border-b-0 rounded-se-md rounded-es-none"
                    onPointerDown={(e: React.PointerEvent<HTMLButtonElement>) => inputRef.current?.increment(e, 1)}
                    onPointerUp={inputRef.current?.stopSpin}
                >
                    <i className="pi pi-plus"></i>
                </InputGroup.Addon>
                <InputNumber ref={inputRef} value={value} min={0} max={100} onValueChange={inputNumber?.onValueChange} className="w-[3rem]" />
                <InputGroup.Addon
                    as={Button}
                    severity="secondary"
                    iconOnly
                    className="w-[3rem] border-l-[var(--p-inputtext-border-color)] border-l border-t-0 rounded-se-none rounded-es-md"
                    onPointerDown={(e: React.PointerEvent<HTMLButtonElement>) => inputRef.current?.decrement(e, -1)}
                    onPointerUp={inputRef.current?.stopSpin}
                >
                    <i className="pi pi-minus"></i>
                </InputGroup.Addon>
            </InputGroup>
        </div>
    );
}

Filled#

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

filled-demo.tsx
'use client';

import { InputNumber } from 'primereact/inputnumber';

export default function FilledDemo() {
    return (
        <div className="flex justify-center">
            <InputNumber variant="filled" />
        </div>
    );
}

Float Label#

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

float-label-demo.tsx
'use client';

import type { InputNumberValueChangeEvent } from '@primereact/types/shared/inputnumber';
import { InputNumber } from 'primereact/inputnumber';
import { Label } from 'primereact/label';
import * as React from 'react';

export default function FloatLabelDemo() {
    const [value1, setValue1] = React.useState<number | null>(null);
    const [value2, setValue2] = React.useState<number | null>(null);
    const [value3, setValue3] = React.useState<number | null>(null);

    return (
        <div className="flex flex-wrap justify-center items-end gap-4">
            <Label.Float>
                <InputNumber
                    value={value1}
                    onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)}
                    inputId="over_label"
                    mode="currency"
                    currency="USD"
                    locale="en-US"
                />
                <Label htmlFor="over_label">Over Label</Label>
            </Label.Float>

            <Label.Float variant="in">
                <InputNumber
                    value={value2}
                    onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)}
                    inputId="in_label"
                    mode="currency"
                    currency="USD"
                    locale="en-US"
                    variant="filled"
                />
                <Label htmlFor="in_label">In Label</Label>
            </Label.Float>

            <Label.Float variant="on">
                <InputNumber
                    value={value3}
                    onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)}
                    inputId="on_label"
                    mode="currency"
                    currency="USD"
                    locale="en-US"
                />
                <Label htmlFor="on_label">On Label</Label>
            </Label.Float>
        </div>
    );
}

Ifta Label#

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

ifta-label-demo.tsx
'use client';

import { InputNumber } from 'primereact/inputnumber';
import { Label } from 'primereact/label';

export default function IftaLabelDemo() {
    return (
        <div className="flex justify-center">
            <Label.Ifta>
                <InputNumber defaultValue={1} inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
                <Label htmlFor="price_input">Price</Label>
            </Label.Ifta>
        </div>
    );
}

Sizes#

Textarea provides small and large sizes as alternatives to the base by setting the size property.

sizes-demo.tsx
'use client';

import { InputNumber } from 'primereact/inputnumber';

export default function SizesDemo() {
    return (
        <div className="flex flex-col items-center gap-4">
            <InputNumber size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
            <InputNumber placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
            <InputNumber size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
        </div>
    );
}

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.

invalid-demo.tsx
'use client';

import type { InputNumberValueChangeEvent } from '@primereact/types/shared/inputnumber';
import { InputNumber } from 'primereact/inputnumber';
import * as React from 'react';

export default function InvalidDemo() {
    const [value1, setValue1] = React.useState<number | null>(null);
    const [value2, setValue2] = React.useState<number | null>(null);

    return (
        <div className="flex flex-wrap justify-center gap-4">
            <InputNumber
                value={value1}
                onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)}
                invalid={value1 === null}
                mode="decimal"
                minFractionDigits={2}
                placeholder="Amount"
            />
            <InputNumber
                value={value2}
                onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)}
                invalid={value2 === null}
                mode="decimal"
                minFractionDigits={2}
                variant="filled"
                placeholder="Amount"
            />
        </div>
    );
}

Disabled#

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

disabled-demo.tsx
'use client';

import { InputNumber } from 'primereact/inputnumber';

export default function DisabledDemo() {
    return (
        <div className="flex justify-center">
            <InputNumber defaultValue={50} disabled prefix="%" />
        </div>
    );
}

Accessibility#

Screen Reader Support#

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.

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 11.0.0-alpha.8 on React by PrimeTek