Currency Input

Components > Editing Data > Currency Input

Use this component to...

Prompt the user for a currency value

See this component in action...

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

Overview

Use the currency input component to prompt the user to enter a currency value.

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 currency format

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 with mode="decimal" locale="en-US" to specify a currency input. Also bind minFractionDigits and maxFractionDigits to 2 and step to 0.01. Add rui-form-control as the inputStyleClass to inherit the correct styling.

Add <span class="input-group-addon">$</span> before the p-inputNumber element to display a dollar sign before the input. Nest both this span and the p-inputNumber within a div that has the input-group CSS class.

Currency input HTML

<div class="input-group">
    <span class="input-group-addon">$</span>
    <p-inputNumber formControlName="grossIncome" inputId="GrossIncome" inputStyleClass="rui-form-control"
      mode="decimal" locale="en-US" [minFractionDigits]="2" [maxFractionDigits]="2" [step]="0.01"></p-inputNumber>
</div>

The PrimeNG InputNumber component also includes a currency mode that displays a dollar sign within the input. This does work, however there is a bug when a user clicks into the input (after the value) and uses the backspace key to clear out the current entry. If the user then tries to type an amount with cents such as 1.99, the result is $1,990.00. Using the decimal mode with the dollar sign in an input group addon works as expected in this scenario and is the preferred method.

Angular component development

Component reference

p-inputNumber

Module: InputNumberModule - Package: primeng

Allows user to edit values that have a currency format

View the p-inputNumber reference doc

Implementation

Begin by importing the InputNumberModule module into your application.

Import the module

import { InputNumberModule } from 'primeng/inputnumber';

Currency input HTML

<div class="input-group">
    <span class="input-group-addon">$</span>
    <p-inputNumber formControlName="grossIncome" inputId="GrossIncome" inputStyleClass="rui-form-control"
      mode="decimal" locale="en-US" [minFractionDigits]="2" [maxFractionDigits]="2" [step]="0.01"></p-inputNumber>
</div>

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
Currency input	RUI / Forms / Currency Input

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
Currency input	JHA / Forms / Currency 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.

Last updated Wed Apr 19 2023