Number Input

Components > Editing Data > Number Input

Use this component to...

Prompt the user for a numeric value

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Use the number input component to prompt the user to enter a numeric value.

These numeric values can be integers or can include a decimal point with a fractional part if needed.

Development

Web component development

Component reference

p-inputNumber

Module: InputNumberModule - Package: primeng

⚠️ This component requires the use of Angular and will not work in non-Angular applications.

Allows user to edit values that have a formatted number

View the p-inputNumber reference doc

If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.

Implementation

Begin by importing the InputNumberModule module into your application.

Import the module

import { InputNumberModule } from 'primeng/inputnumber';

Add a PrimeNG p-inputNumber component. Add rui-form-control as the inputStyleClass to inherit the correct styling.

Depending on the type of formatting needed, reference the PrimeNG InputNumber documentation and add the corresponding properties. For integer-only examples, no additional properties are needed.

Integer-only numeric input

<p-inputNumber formControlName="quantity" inputId="Quantity" inputStyleClass="rui-form-control"></p-inputNumber>

For decimal examples, bind mode to decimal and locale to en-US. You can also set optional properties, including minFractionDigits, step, min, and max.

Decimal numeric input example

<p-inputNumber formControlName="interestRate" inputId="InterestRate" inputStyleClass="rui-form-control"
    mode="decimal" locale="en-US" [minFractionDigits]="3" [step]="0.25" [min]="3" [max]="100"></p-inputNumber>

Angular component development

Component reference

p-inputNumber

Module: InputNumberModule - Package: primeng

Allows user to edit values that have a formatted number

View the p-inputNumber reference doc

Implementation

Begin by importing the InputNumberModule module into your application.

Import the module

import { InputNumberModule } from 'primeng/inputnumber';

Add a PrimeNG p-inputNumber component. Add form-control as the inputStyleClass to inherit the correct styling.

Depending on the type of formatting needed, reference the PrimeNG InputNumber documentation and add the corresponding properties. For integer-only examples, no additional properties are needed.

Integer-only numeric input

<p-inputNumber formControlName="quantity" inputId="Quantity" inputStyleClass="form-control"></p-inputNumber>

For decimal examples, bind mode to decimal and locale to en-US. You can also set optional properties, including minFractionDigits, step, min, and max.

Decimal numeric input example

<p-inputNumber formControlName="interestRate" inputId="InterestRate" inputStyleClass="form-control"
   mode="decimal" locale="en-US" [minFractionDigits]="3" [step]="0.25" [min]="3" [max]="100"></p-inputNumber>

Design

Figma design

Figma design info

You can find this component in the Components - Forms page in the Figma UI Kit.

Dev Component	Design Component Name
Number input	Add text and apply the “rui/regular” text style and “rui-pacific/text-regular” color style. Suffix the field label with a colon.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Editing Form Data

Dev Component	Design Component Name
Number input	JHA / Forms / Text Input Select the “Watermark Text” state in the component if you want to show watermark text instead of user input.

Dev Component

Design Component Name

Number input

JHA / Forms / Text Input

Select the “Watermark Text” state in the component if you want to show watermark text instead of user input.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Did this page help you?

Last updated Wed Apr 19 2023