InputNumber

InputNumber is an input component to provide numerical input.


import { InputNumberModule } from 'primeng/inputnumber';

InputNumber is used as a controlled input with ngModel property.


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

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>

Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user 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 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".


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

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


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

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.


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

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

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


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

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

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


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

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

NameElement
p-inputnumberContainer element
p-input-number-stackedContainer element with stacked buttons.
p-input-number-horizontalContainer element with horizontal buttons.
p-input-number-verticalContainer element with vertical buttons.
p-input-number-inputInput element
p-input-number-buttonInput element
p-input-number-button-upIncrement button
p-input-number-button-downDecrement button
p-input-number-button-iconButton icon

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

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.