InputNumber

InputNumber is an input component to provide numerical input.

Import #


import { InputNumberModule } from 'primeng/inputnumber';

Numerals #

InputNumber is used as a controlled input with ngModel property.

Integer Only

Without Grouping

Min-Max Fraction Digits

Min-Max Boundaries


<p-inputNumber 
    inputId="integeronly" 
    [(ngModel)]="value1" /> 

<p-inputNumber 
    [(ngModel)]="value2" 
    mode="decimal" 
    inputId="withoutgrouping" 
    [useGrouping]="false" /> 

<p-inputNumber 
    [(ngModel)]="value3" 
    inputId="minmaxfraction" 
    mode="decimal" 
    [minFractionDigits]="2" 
    [maxFractionDigits]="5" /> 

<p-inputNumber 
    [(ngModel)]="value4" 
    inputId="minmax" 
    mode="decimal" 
    [min]="0" 
    [max]="100" />

Reactive Forms #

InputNumber can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.


<form [formGroup]="formGroup">
    <p-inputNumber inputId="integeronly" formControlName="value" />
</form>

Locale #

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

User Locale

United States Locale

German Locale

Indian Locale


<p-inputNumber 
    [(ngModel)]="value1" 
    inputId="locale-user" 
    [minFractionDigits]="2" />

<p-inputNumber 
    [(ngModel)]="value2" 
    inputId="locale-us" 
    mode="decimal" 
    locale="en-US" 
    [minFractionDigits]="2" /> 

<p-inputNumber 
    [(ngModel)]="value3" 
    inputId="locale-german" 
    mode="decimal" 
    locale="de-DE" 
    [minFractionDigits]="2" /> 

<p-inputNumber 
    [(ngModel)]="value4" 
    inputId="locale-indian" 
    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

Germany

India

Japan


<p-inputNumber 
    [(ngModel)]="value1" 
    inputId="currency-us" 
    mode="currency" 
    currency="USD" 
    locale="en-US" /> 

<p-inputNumber 
    [(ngModel)]="value2" 
    mode="currency"
    inputId="currency-germany"
    currency="EUR" 
    locale="de-DE" /> 

<p-inputNumber 
    [(ngModel)]="value3"
    mode="currency" 
    inputId="currency-india" 
    currency="INR" 
    currencyDisplay="code" 
    locale="en-IN" /> 

<p-inputNumber 
    [(ngModel)]="value4"
    mode="currency"
    inputId="currency-japan" 
    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.

Mile

Percent

Expiry

Temperature


<p-inputNumber 
    [(ngModel)]="value1" 
    inputId="mile" 
    suffix=" mi" /> 

<p-inputNumber 
    [(ngModel)]="value2" 
    inputId="percent" 
    prefix="%" /> 

<p-inputNumber 
    [(ngModel)]="value3"
    inputId="expiry" 
    prefix="Expires in "
    suffix=" days" /> 

<p-inputNumber 
    [(ngModel)]="value4" 
    prefix="↑ " 
    inputId="temperature" 
    suffix="℃" 
    [min]="0" 
    [max]="40" />

Buttons #

Spinner buttons are 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

Min-Max Boundaries

Horizontal with Step


<p-inputNumber 
    [(ngModel)]="value1" 
    [showButtons]="true" 
    inputId="stacked" 
    mode="currency" 
    currency="USD" />

<p-inputNumber 
    [(ngModel)]="value2" 
    mode="decimal" 
    [showButtons]="true" 
    inputId="minmax-buttons" 
    [min]="0" 
    [max]="100" /> 

<p-inputNumber 
    [(ngModel)]="value3" 
    [showButtons]="true" 
    buttonLayout="horizontal" 
    inputId="horizontal" 
    spinnerMode="horizontal" 
    [step]="0.25"
    decrementButtonClass="p-button-danger"
    incrementButtonClass="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.


<p-inputNumber 
    [(ngModel)]="value1" 
    [showButtons]="true" 
    buttonLayout="vertical" 
    spinnerMode="vertical" 
    inputId="vertical"
    decrementButtonClass="p-button-secondary"
    incrementButtonClass="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. Visit FloatLabel documentation for more information.

Number


<p-floatLabel>
    <p-inputNumber inputId="integeronly" [(ngModel)]="value1" />
    <label for="number-input">Number</label>
</p-floatLabel>

Filled #

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


<p-inputNumber variant="filled" [(ngModel)]="value1" />

Invalid #

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


<p-inputNumber 
    inputId="integeronly" 
    class="ng-invalid ng-dirty" 
    [(ngModel)]="value1" />

Disabled #

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


<p-inputNumber 
    inputId="integeronly" 
    [disabled]="true" 
    prefix="%" 
    [(ngModel)]="value1" />

Style #

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

Name	Element
p-inputnumber	Container element
p-input-number-stacked	Container element with stacked buttons.
p-input-number-horizontal	Container element with horizontal buttons.
p-input-number-vertical	Container element with vertical buttons.
p-input-number-input	Input element
p-input-number-button	Input element
p-input-number-button-up	Increment button
p-input-number-button-down	Decrement button
p-input-number-button-icon	Button icon

Accessibility #

Screen Reader

Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. The input element uses spinbutton role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes.


<label for="price">Price</label>
<p-inputNumber inputId="price" />

<span id="label_number">Number</span>
<p-inputNumber ariaLabelledBy="label_number" />

<p-inputNumber ariaLabel="Number" />

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.

InputNumber API

API defines helper props, events and others for the PrimeNG InputNumber module.

InputNumber #

InputNumber is an input component to provide numerical input.

Properties #

Defines the input properties of the component.

name	type	default	description
showButtons	boolean	false	Displays spinner buttons.
format	boolean	true	Whether to format the value.
buttonLayout	string	stacked	Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".
inputId	string	null	Identifier of the focus input to match a label defined for the component.
styleClass	string	null	Style class of the component.
style	Object	null	Inline style of the component.
placeholder	string	null	Advisory information to display on input.
size	number	null	Size of the input field.
maxlength	number	null	Maximum number of character allows in the input field.
tabindex	number	null	Specifies tab order of the element.
title	string	null	Title text of the input text.
ariaLabelledBy	string	null	Specifies one or more IDs in the DOM that labels the input field.
ariaLabel	string	null	Used to define a string that labels the input element.
ariaRequired	boolean	false	Used to indicate that user input is required on an element before a form can be submitted.
name	string	null	Name of the input field.
required	boolean	false	Indicates that whether the input field is required.
autocomplete	string	null	Used to define a string that autocomplete attribute the current element.
min	number	null	Mininum boundary value.
max	number	null	Maximum boundary value.
incrementButtonClass	string	null	Style class of the increment button.
decrementButtonClass	string	null	Style class of the decrement button.
incrementButtonIcon	string	null	Style class of the increment button.
decrementButtonIcon	string	null	Style class of the decrement button.
readonly	boolean	false	When present, it specifies that an input field is read-only.
step	number	1	Step factor to increment/decrement the value.
allowEmpty	boolean	true	Determines whether the input field is empty.
locale	string	null	Locale to be used in formatting.
localeMatcher	string	null	The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See Locale Negotiation for details.
mode	string	decimal	Defines the behavior of the component, valid values are "decimal" and "currency".
currency	string	null	The 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.
currencyDisplay	string	null	How 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".
useGrouping	boolean	true	Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
variant	"outlined" \| "filled"	outlined	Specifies the input variant of the component.
minFractionDigits	number	null	The 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).
maxFractionDigits	number	null	The 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).
prefix	string	null	Text to display before the value.
suffix	string	null	Text to display after the value.
inputStyle	any	null	Inline style of the input field.
inputStyleClass	string	null	Style class of the input field.
showClear	boolean	false	When enabled, a clear icon is displayed to clear the value.
autofocus	boolean	false	When present, it specifies that the component should automatically get focus on load.
disabled	boolean	null	When present, it specifies that the element should be disabled.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onInput	event : InputNumberInputEvent	Callback to invoke on input.
onFocus	event : Event	Callback to invoke when the component receives focus.
onBlur	event : Event	Callback to invoke when the component loses focus.
onKeyDown	event : KeyboardEvent	Callback to invoke on input key press.
onClear	value : void	Callback to invoke when clear token is clicked.

Templates #

Defines the templates used by the component.

name	parameters	description
clearicon		Custom clear icon template.
incrementbuttonicon		Custom increment button icon template.
decrementbuttonicon		Custom decrement button icon template.

Events #

Defines the custom events used by the component's emitters.

InputNumberInputEvent #

Custom input event.

name	type	description
originalEvent	Event	Browser event.
value	string \| number	Input value.
formattedValue	string	Selected option value.