Source: https://primeng.org/inputnumber

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

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

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 #incrementbuttonicon> <span class="pi pi-plus"></span> </ng-template> <ng-template #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 #incrementbuttonicon> <span class="pi pi-plus"></span> </ng-template> <ng-template #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 LabelIn LabelOn 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>

Clear Icon #

When showClear is enabled, a clear icon is displayed to clear the value.

<p-inputnumber [(ngModel)]="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" [showClear]="true" inputStyleClass="w-56" />

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

Fluid #

The fluid prop makes the component take up the full width of its container when set to true.

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

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

Disabled #

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

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

Invalid #

The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms.

<p-inputnumber [(ngModel)]="value1" [invalid]="value1 === undefined" mode="decimal" [minFractionDigits]="2" placeholder="Amount" /> <p-inputnumber [(ngModel)]="value2" [invalid]="value2 === undefined" mode="decimal" [minFractionDigits]="2" variant="filled" placeholder="Amount" />

Forms #

Template Driven

Submit

<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <p-inputnumber inputId="integeronly" #inputValue="ngModel" name="inputValue" [(ngModel)]="value" [invalid]="inputValue.invalid && (inputValue.touched || exampleForm.submitted)" required/> @if (inputValue.invalid && (inputValue.touched || exampleForm.submitted)) { <p-message severity="error" size="small" variant="simple">Number is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

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.

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <p-inputnumber inputId="integeronly" formControlName="value" [invalid]="isInvalid('value')"/> @if (isInvalid('value')) { <p-message severity="error" size="small" variant="simple">Value is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Accessibility #

Screen Reader

Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel, ariaDescribedBy 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" />

<p-inputnumber ariaDescribedBy="describe" />
<small id="describe">Information</small>

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. |

• Import

• Numerals

• Locale

• Currency

• Prefix & Suffix

• Buttons

• Vertical

• Float Label

• Ifta Label

• Clear Icon

• Sizes

• Fluid

• Filled

• Disabled

• Invalid

• Forms

  • Template Driven

  • Reactive Forms

• Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeNG 20.3.0 by PrimeTek