InputNumber

InputNumber is an input component to provide numerical input.

Import #


import { InputNumber } 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" mode="currency" currency="EUR">
    <ng-template pTemplate="incrementbuttonicon">
        <span class="pi pi-plus"></span>
    </ng-template>
    <ng-template pTemplate="decrementbuttonicon">
        <span class="pi pi-minus"></span>
    </ng-template>
</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" [inputStyle]="{ width: '3rem' }">
    <ng-template pTemplate="incrementbuttonicon">
        <span class="pi pi-plus"></span>
    </ng-template>
    <ng-template pTemplate="decrementbuttonicon">
        <span class="pi pi-minus"></span>
    </ng-template>
</p-inputnumber>

Float Label #

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

Over Label

In Label

On Label


<p-floatlabel>
    <p-inputnumber [(ngModel)]="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
    <label for="over_label">Over Label</label>
</p-floatlabel>

<p-floatlabel variant="in">
    <p-inputnumber [(ngModel)]="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" />
    <label for="in_label">In Label</label>
</p-floatlabel>

<p-floatlabel variant="on">
    <p-inputnumber [(ngModel)]="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
    <label for="on_label">On Label</label>
</p-floatlabel>

Ifta Label #

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

Price


<p-iftalabel>
    <p-inputnumber [(ngModel)]="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" />
    <label for="price_input">Price</label>
</p-iftalabel>

Sizes #

InputNumber provides small and large sizes as alternatives to the base.


<p-inputnumber [(ngModel)]="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
<p-inputnumber [(ngModel)]="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
<p-inputnumber [(ngModel)]="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />

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)]="value" placeholder="Amount" />

Disabled #

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


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

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.

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	"small" \| "large"	null	Defines the size of the component.
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	any	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	any	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	any	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.
fluid	boolean	false	Spans 100% width of the container when enabled.

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.

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

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

class	description
p-inputnumber	Class name of the root element
p-inputnumber-input	Class name of the input element
p-inputnumber-button-group	Class name of the button group element
p-inputnumber-increment-button	Class name of the increment button element
p-inputnumber-decrement-button	Class name of the decrement button element

InputNumber

Import #

Numerals #

Reactive Forms #

Locale #

Currency #

Prefix & Suffix #

Buttons #

Vertical #

Float Label #

Ifta Label #

Sizes #

Filled #

Invalid #

Disabled #

Accessibility #

Screen Reader

Keyboard Support

InputNumber API

InputNumber #

Properties #

Emitters #

Templates #

Events #

InputNumberInputEvent #

InputNumber Theming

CSS Classes #

InputNumber Design Tokens #

token	variable	description
inputnumber.transition.duration	--p-inputnumber-transition-duration	Transition duration of root
inputnumber.button.width	--p-inputnumber-button-width	Width of button
inputnumber.button.border.radius	--p-inputnumber-button-border-radius	Border radius of button
inputnumber.button.vertical.padding	--p-inputnumber-button-vertical-padding	Vertical padding of button
inputnumber.button.background	--p-inputnumber-button-background	Background of button
inputnumber.button.hover.background	--p-inputnumber-button-hover-background	Hover background of button
inputnumber.button.active.background	--p-inputnumber-button-active-background	Active background of button
inputnumber.button.border.color	--p-inputnumber-button-border-color	Border color of button
inputnumber.button.hover.border.color	--p-inputnumber-button-hover-border-color	Hover border color of button
inputnumber.button.active.border.color	--p-inputnumber-button-active-border-color	Active border color of button
inputnumber.button.color	--p-inputnumber-button-color	Color of button
inputnumber.button.hover.color	--p-inputnumber-button-hover-color	Hover color of button
inputnumber.button.active.color	--p-inputnumber-button-active-color	Active color of button