ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/currency-input.md

id	title
currency-input	Currency Input

The Currency Input component allows users to enter currency-formatted values. It's especially useful for forms and financial applications where numerical values need to be formatted with currency symbols, decimal places, and thousand separators.

This component ensures consistent formatting of monetary values, prevents invalid input, and supports a range of customization options, such as currency type and precision.

Example Usage

A finance team needs to build an expense reimbursement form where employees submit claims in different currencies. Using the Currency Input component, employees can select their expense currency (USD, EUR, GBP, etc.) from the dropdown, enter the amount with automatic formatting, and the form captures both the raw value and formatted value with the currency symbol for processing.

Properties

<div style={{ width:"150px"}}> Property	<div style={{ width:"250px"}}> Description	<div style={{width: "200px"}}> Expected Value
Label	Text to display as the label for the field.	String (e.g. Reimbursement Amount).
Placeholder	A hint displayed to guide the user on what to enter.	String (e.g. Enter the amount in USD).
Default value	The default value that the component will hold when the app is loaded.	Number (e.g. 83.67).
Decimal places	Number of decimal places to show after the decimal point.	Integer (e.g. 2).
Number format	Sets the number formatting style for the currency value.	Select US / UK (eg. 1,234.56) for comma as thousand separator and dot as decimal, or European (eg. 1.234,56) for dot as thousand separator and comma as decimal. Use fx to set dynamically (us or eu).
Default Currency	Sets the currency format to use by default.	Select the default currency from the dropdown or update it dynamically using fx.
Enable currency change	Allows the user to select a different currency from a dropdown. If disabled, the user can enter only the default currency.	Enable or disable it using the toggle button or use fx to update it dynamically.
Show currency flag	Decide whether the currency flag should be visible along with the currency symbol.	Enable or disable it using the toggle button or use fx to update it dynamically.

Events

Event	Description
On change	Triggers when the user types in the input field.
On enter pressed	Triggers whenever the user presses the enter key on the keyboard.
On focus	Triggers whenever the user clicks inside the input field.
On blur	Triggers whenever the user clicks outside the input field.

:::info Check Action Reference docs to get detailed information about all the Actions. :::

Component Specific Actions (CSA)

The following actions of the component can be controlled using the component-specific actions (CSA). You can trigger these using an event or through a RunJS query.

<div style={{ width:"100px"}}> Action	<div style={{ width:"135px"}}> Description	<div style={{width: "200px"}}> How To Access
setValue	Sets the value and optionally the country of the Currency Input field.	components.currencyinput1.setValue(value, country)
clear	Clears the input field.	components.currencyinput1.clear()
setFocus	Sets the focus of the cursor on the input field.	components.currencyinput1.setFocus()
setBlur	Removes focus from the input field.	components.currencyinput1.setBlur()
setVisibility	Sets the visibility of the component.	components.currencyinput1.setVisibility(false)
setLoading	Sets the loading state of the component.	components.currencyinput1.setLoading(true)
setDisable	Disables the component.	components.currencyinput1.setDisable(true)
setCountryCode	Programmatically sets the country code.	components.currencyinput1.setCountryCode('US')

Exposed Variables

Variable	<div style={{ width:"250px"}}> Description	How To Access
value	Holds the value of the component.	{{components.currencyinput1.value}}
label	Holds the value of the component's label.	{{components.currencyinput1.label}}
isValid	Indicates if the input meets validation criteria.	{{components.currencyinput1.isValid}}
isMandatory	Indicates if the field is required.	{{components.currencyinput1.isMandatory}}
isLoading	Indicates if the component is loading.	{{components.currencyinput1.isLoading}}
isVisible	Indicates if the component is visible.	{{components.currencyinput1.isVisible}}
isDisabled	Indicates if the component is disabled.	{{components.currencyinput1.isDisabled}}
country	Holds the selected country in the currency input component.	{{components.currencyinput1.country}}
formattedValue	Holds the currency-formatted value based on the input and selected country.	{{components.currencyinput1.formattedValue}}

Validation

<div style={{ width:"200px"}}> Validation Option	<div style={{ width:"250px"}}> Description	<div style={{width: "200px"}}> Expected Value
Make this field mandatory	Displays a 'Field cannot be empty' message if no value is entered.	Enable/disable the toggle button or dynamically configure using fx.
Regex	Regular Expression to validate the input.	Regular Expression Pattern (e.g., ^\d+(\.\d{1,2})?$).
Min value	Sets the minimum value allowed.	Integer (e.g., 99).
Max value	Sets the maximum value allowed.	Integer (e.g., 1000).
Custom validation	Specifies a validation error message for specific conditions.	Logical Expression (e.g., {{components.currencyinput1.value<99&&"Value needs to be more than $99"}}).

To add regex inside Custom Validation, you can use the below format:

Format: {{(<regexPattern>.test(<value>)) ? '' : 'Error message';}}

Example: {{(/^\d+(\.\d{1,2})?$/.test(components.currencyinput1.value)) ? '' : 'Invalid Input';}}

Additional Actions

<div style={{ width:"100px"}}> Action	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Loading state	Enables a loading spinner, often used with isLoading to indicate progress.	Enable/disable the toggle button or dynamically configure the value by clicking fx and entering a logical expression.
Visibility	Controls component visibility.	Enable/disable the toggle button or dynamically configure the value by clicking fx and entering a logical expression.
Disable	Enables or disables the component.	Enable/disable the toggle button or dynamically configure the value by clicking fx and entering a logical expression.
Tooltip	Provides additional information on hover. Set a display string.	String (e.g., Enter the amount in USD ).

Devices

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Expected Value
Show on desktop	Makes the component visible in desktop view.	You can set it with the toggle button or dynamically configure the value by clicking fx and entering a logical expression.
Show on mobile	Makes the component visible in mobile view.	You can set it with the toggle button or dynamically configure the value by clicking fx and entering a logical expression.

Styles

Label

<div style={{ width:"100px"}}> Label Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Text	Sets the color of the component's label.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Alignment	Sets the position of the label and input field.	Select either side or top or click on fx to input code that programmatically returns an alignment value - side or top.
Width	Sets the width of the input field.	Enable Auto width to use the standard width automatically. Disable it to manually adjust the width using the slider or by entering a numeric value via fx. You can also choose whether the width is calculated relative to the Container or relative to the Field.

Field

<div style={{ width:"100px"}}> Field Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Background	Sets the background color of the component.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Border	Sets the border color of the component.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Accent	Sets the accent color of the component, used for focus state highlighting.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Text	Sets the text color of the text entered in the component.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Error text	Sets the text color of the validation message that is displayed.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Border radius	Modifies the border radius of the component.	Enter a number or click on fx and enter a code that programmatically returns a numeric value.
Box shadow	Sets the box shadow properties of the component.	Select the box shadow color and adjust the related properties or set it programmatically using fx.

Container

<div style={{ width:"100px"}}> Container Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Padding	Adds padding between the component and its container boundary.	Select Default for standard padding or None to remove padding.

---

Need Help?

• Reach out via our Slack Community
• Or email us at support@tooljet.com
• Found a bug? Please report it via GitHub Issues