| Name | Description | Default | Type |
|---|---|---|---|
onChange* | | (value: string) => void | |
additionalInfo | Button when clicked will show additional information | | { content: string | Element; heading: string;} |
alwaysShowISOCode | Always show ISO code | false | boolean |
aria-label | Optional manual override for generated aria label | | string |
autoFocus | Automatically focuses the input on render. | | boolean |
className | Additional CSS classes. | | string |
currencyISOCode | Three letter currency shorthand ISO code. If not provided or invalid, component renders as NumberInput | | string |
disabled | Disable the control. The browser defaults to false. | | boolean |
id | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. | | string |
info | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. | | ReactNode |
label | Pass a string or a fragment with an Icon and string. | | ReactNode |
labelHidden | Visually hides the label region. | false | boolean |
max | The maximum value to accept for this input. This value must be greater than or equal to the value of the min attribute. | Number.MAX_SAFE_INTEGER | number |
maximumFractionDigits | Fixed number of maximum fraction digits. | | number |
min | The minimum value to accept for this input. This value must be less than or equal to the value of the max attribute. | Number.MIN_SAFE_INTEGER | number |
minimumFractionDigits | Fraction digits consistent with ISO | | number |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
onBlur | | (value: string) => void | |
onFocus | | (value: string) => void | |
onResolveSuggestion | | (accepted: boolean) => void | |
placeholder | Placeholder text. The browser defaults to an empty string. | | string |
readOnly | Makes the component non editable and non clickable. The browser defaults to false. | | boolean |
ref | Ref for the wrapping element. | | Ref<HTMLInputElement> |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
showDecimal | /** Determines whether decimal places should be shown. The value is rounded if true. | true | boolean |
showGroupSeparators | Determines whether group separators should be shown. | true | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
step | A stepping interval to use when using up and down arrows to adjust the value. | 1 | number |
unit | Defines unit of the number, like 'kg', 'miles' or '%'. | | string |
value | CurrencyInput input value. Requires an onChange handler to update value. | | string |
variant | Component variation. Might be rendered as regular input or stepper. | 'default' | 'default' |'stepper' |
CurrencyInput
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The CurrencyInput component allows a user to enter a monetary value that will be auto-formatted to match a particular currency, such as pounds sterling, euros, dollars, etc.
To learn more about configuration, visit Pega Community.
Usage
The formatting for the value entered within the CurrencyInput (e.g., separators, decimals), as well as any numerical formatting necessary for a particular locale, will be applied as a user types. You can configure the locale of your application via the Configuration component.
The CurrencyInput component is built on top of the NumberInput and thus shares certain props such as unit, step, min and max. The component will only allow a user to enter numerical data and any other characters will be ignored. The unit placement (either at the start or end of the input) is determined based on the runtime environment's locale.
There are a variety of formatting options for the CurrencyInput component that enable you to show decimals, show group separators, and show the currency symbol. The component also allows for standard Form Field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info. If an onResolveSuggestion callback function is provided, and the status is set to pending, the user will be prompted to accept or deny whatever suggested value populates the CurrencyInput.
If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.
Example
Enter a numerical value