Developer Programs
Vendor Integration Program (VIP)
Direct access to Jack Henry's technical integration resources.
Technical Account Manager (TAM)
Get technical integration help from a single point of contact.
Developer Account
Create a developer acccount to access resources that help you integrate with Jack Henry.
Learn
Shared Responsibility
Learn about shared roles and responsibilities of customers and Jack Henry in open banking.
Developer Use Cases
Find a use case that fits your development needs.
Developer Video Gallery
Watch the latest demos, webinars, and more.
Developer Conference
Connect with industry leaders, gain insights from expert speakers, and explore our latest innovations.
Docs
Admin API
Create solutions for an institution's back office support tools.
Authentication Framework
Map customer identities to your existing system IDs.
Consumer API
Access financial data for user accounts, transactions, and more.
Data Broker
Get deeper access to financial institution data.
Enterprise Event System
Respond to events in real-time using this powerful pub/sub-based solution.
jXchange - REST API
Translate business information between Jack Henry and third-party applications using a REST-based API.
jXchange - SOAP API
Translate business information between Jack Henry and third-party applications using a SOAP-based API.
Operational Data Integration (ODI)
Get customized queries for bulk data needs.
Payments
Embed check deposits, ACH, bill pay, cards, and real-time payments.
Plugin Framework
Embed the best of the fintech world directly into your user's dashboard.
SymXchange
Query Symitar core member accounts, post transactions, run PowerOn scripts, and more.
Xperience
Modern UI that provides consistent visual integration across Jack Henry products.

Rate Input

Components > Editing Data > Rate Input
Use this component to...
Prompt the user for a rate value
See this component in action...
Test out this component in a hosted version of the sample app

Overview

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

Currency input

Development

Web component development

Component reference

p-inputNumber
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 rate 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" for the rate input. Bind minFractionDigits to the minimum amount of decimal digits required. You can additionally set properties such as step, min and max. Add rui-form-control as the inputStyleClass to inherit the correct styling.

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

Rate input HTML
<div class="input-group">
    <p-inputNumber formControlName="interestRate" inputId="InterestRate" inputStyleClass="rui-form-control"
        mode="decimal" [minFractionDigits]="3" [step]="0.25" [min]="3" [max]="100"></p-inputNumber>
    <span class="input-group-addon">%</span>
</div>

Angular component development

Component reference

p-inputNumber
p-inputNumber
Module: InputNumberModule - Package: primeng

Allows user to edit values that have a rate 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" for the rate input. Bind minFractionDigits to the minimum amount of decimal digits required. You can additionally set properties such as step, min and max. Add rui-form-control as the inputStyleClass to inherit the correct styling.

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

Rate input HTML
<div class="input-group">
    <p-inputNumber formControlName="interestRate" inputId="InterestRate" inputStyleClass="rui-form-control"
        mode="decimal" [minFractionDigits]="3" [step]="0.25" [min]="3" [max]="100"></p-inputNumber>
    <span class="input-group-addon">%</span>
</div>

Design

Figma design

Figma design info
You can find this component in the Components - Forms page in the Figma UI Kit.
Dev ComponentDesign Component Name
Rate inputRUI / Forms / Rate 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 ComponentDesign Component Name
Rate inputJHA / Forms / Rate 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