InputNumber

InputNumber is an input component to provide numerical input.

Import #


import { InputNumberModule } from 'primeng/inputnumber';

Numeral #

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>
<p-inputNumber [(ngModel)]="value2" mode="decimal" inputId="withoutgrouping" [useGrouping]="false"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value3" inputId="minmaxfraction" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="5"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value4" inputId="minmax" mode="decimal" [min]="0" [max]="100"> </p-inputNumber>

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"></p-inputNumber>
</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>
<p-inputNumber [(ngModel)]="value2" inputId="locale-us" mode="decimal" locale="en-US" [minFractionDigits]="2"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value3" inputId="locale-german" mode="decimal" locale="de-DE" [minFractionDigits]="2"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value4" inputId="locale-indian" mode="decimal" locale="en-IN" [minFractionDigits]="2"> </p-inputNumber>

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>
<p-inputNumber [(ngModel)]="value2" mode="currency" inputId="currency-germany" currency="EUR" locale="de-DE"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value3" mode="currency" inputId="currency-india" currency="INR" currencyDisplay="code" locale="en-IN"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value4" mode="currency" inputId="currency-japan" currency="JPY" locale="jp-JP"> </p-inputNumber>

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>
<p-inputNumber [(ngModel)]="value2" inputId="percent" prefix="%"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value3" inputId="expiry" prefix="Expires in " suffix=" days"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value4" prefix="↑ " inputId="temperature" suffix="℃" [min]="0" [max]="40"> </p-inputNumber>

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

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

Float Label #

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

Number



<span class="p-float-label">
    <p-inputNumber inputId="integeronly" [(ngModel)]="value1"> </p-inputNumber>
    <label htmlFor="number-input">Number</label>
</span>

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

Disabled #

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



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

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 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 for="price">Price</label>
<p-inputNumber inputId="price"></p-inputNumber>

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

<p-inputNumber aria-label="Number"></p-inputNumber>

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.
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.
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.
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	Input value.
formattedValue	string	Selected option value.