lara-light-indigo

InputNumber

InputNumber is an input component to provide numerical input.

Numerals
Currency
Prefix and Suffix
Buttons
Import via Module

import { InputNumber } from 'primereact/inputnumber';
 
Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
 
Getting Started

InputNumber is used as a controlled input with value and onValueChange properties. Component always provides a number type although formatting on the input is a string.


<InputNumber value={value} onValueChange={(e) => setValue(e.value)} />
 
Decimal Mode

Format is defined using the mode property, "decimal" is the default value allowing only integers when there is no other configuration.


<InputNumber value={value} onValueChange={(e) => setValue(e.value)}  mode="decimal" />
 

Fractions are configured with the minFractionDigits property. Optionally maxFractionDigits can be used to defined a boundary for the maximum digits.


<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} mode="decimal" minFractionDigits={2} />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} mode="decimal" minFractionDigits={2} maxFracionDigits={2} />
 

locale option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per BCP Language Tag.


User Locale
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} mode="decimal" minFractionDigits={2} />

United State Locale
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} mode="decimal" locale="en-US" minFractionDigits={2}/>

German Locale
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} mode="decimal" locale="de-DE" minFractionDigits={2}/>

Indian Locale
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} mode="decimal" locale="en-IN" minFractionDigits={2} />
 
Currency

Currency formatting is specified by setting the mode option to currency and currency property. In addition currencyDisplay option allows how the currency is displayed, valid values are "symbol" (default) or "code".


United States
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />

Germany
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />

India
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN"/>

Japan
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP"/>
 
Prefix and Suffix

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


Mile
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} suffix=" mi" />

Percent
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} prefix="%" />

Expiry
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} prefix="Expires in " suffix=" days" />

Temperature
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} prefix="&uarr; " suffix="℃" min={0} max={40} />
 
Buttons

Spinner buttons is enabled using the showButtons options and layout is defined with the buttonLayout. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up and down arrow keys can be used to spin the values with keyboard.


Stacked
<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} showButtons mode="currency" currency="USD" />

Horizontal
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} showButtons buttonLayout="horizontal"
    decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR"/>

Vertical
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} mode="decimal" showButtons buttonLayout="vertical" style={{width: '6em'}}
    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
 
Step

Step factor is 1 by default and can be customized with step option.


<InputNumber value={value} onValueChange={(e) => setValue(e.value)} step={0.25} />
 
Min and Max Boundaries

Value to be entered can be restricted by configuring the min and max options.


<InputNumber value={value} onValueChange={(e) => setValue1(e.value)} min={0} max={100} />
 
Properties
NameTypeDefaultDescription
valuenumbernullValue of the component.
formatbooleantrueWhether to format the value.
showButtonsbooleanfalseDisplays spinner buttons.
buttonLayoutstringstackedLayout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".
incrementButtonClassNamestringnullStyle class of the increment button.
decrementButtonClassNamestringnullStyle class of the decrement button.
incrementButtonIconstringpi pi-caret-upStyle class of the increment button.
decrementButtonIconstringpi pi-caret-downStyle class of the decrement button.
localestringnullLocale to be used in formatting.
localeMatcherstringbest fitThe locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See Locale Negotation for details.
modestringdecimalDefines the behavior of the component, valid values are "decimal" and "currency".
prefixstringnullText to display before the value.
suffixstringdecimalText to display after the value.
currencystringnullThe currency to use in currency formatting. Possible values are the ISO 4217 currency codes, 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.
currencyDisplaystringsymbolHow 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"; the default is "symbol".
useGroupingbooleantrueWhether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
minFractionDigitsnumbernullThe 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 list (2 if the list doesn't provide that information).
maxFractionDigitsnumbernullThe 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 list(2 if the list doesn't provide that information).
idstringnullIdentifier of the element.
namestringnullName of the input element.
typestringtextType of the input element.
allowEmptybooleantrueDetermines whether the input field is empty.
stepnumber1Step factor to increment/decrement the value.
minnumbernullMininum boundary value.
maxnumbernullMaximum boundary value.
disabledbooleanfalseWhen present, it specifies that the element should be disabled.
requiredbooleanfalseWhen present, it specifies that an input field must be filled out before submitting the form.
tabIndexnumbernullIndex of the element in tabbing order.
autoFocusbooleanfalseWhen present, it specifies that the component should automatically get focus on load.
patternstringnullThe pattern attribute specifies a regular expression that the element's value is checked against on form submission.
inputmodestringnullThe inputmode attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display.
placeholderstringnullHint text for the input field.
readOnlybooleanfalseWhen present, it specifies that the element should be read-only.
sizenumbernullSize of the input field.
stylestringnullInline style of the component.
classNamestringnullStyle class of the element.
inputIdstringnullIdentifier of the input element.
inputStylestringnullInline style of the input field.
inputClassNamestringnullInline style of the input field.
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
Events
NameParametersDescription
onValueChangeevent.originalEvent: Browser event
event.value: New value
Callback to invoke after validation check and value change.
onChangeevent.originalEvent: Browser event
event.value: New value
Callback to invoke on value change.
onFocusevent: Browser eventCallback to invoke when input receives focus.
onBlurevent: Browser eventCallback to invoke when input loses focus.
onKeyDownevent: Browser event.Callback to invoke when the key pressed.
Styling

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
Dependencies

None.

Component Scale

Input Style

Ripple Effect

Free Themes

Built-in component themes created by the PrimeReact Theme Designer.

Bootstrap
Blue
Purple
Blue
Purple
Material Design
Indigo
Deep Purple
Indigo
Deep Purple
Material Design Compact
Indigo
Deep Purple
Indigo
Deep Purple
Tailwind
Tailwind Light
Fluent UI
Blue
PrimeOne Design - 2022 NEW
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
PrimeOne Design - 2021
Saga Blue
Saga Green
Saga Orange
Saga Purple
Vela Blue
Vela Green
Vela Orange
Vela Purple
Arya Blue
Arya Green
Arya Orange
Arya Purple
Premium Themes

Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

Soho Light
Soho Dark
Viva Light
Viva Dark
Mira
Nano

Legacy Free Themes

Nova
Nova Alt
Nova Accent
Luna Blue
Luna Green
Luna Amber
Luna Pink
Rhea

Premium Create-React-App Templates

Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

Sakai
Atlantis
Freya
Ultima
Diamond
Sapphire
Serenity
Babylon
Avalon
Apollo
Roma