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.
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.
| 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. |
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.
| 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"}}`). |
| 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` ). |
| 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. |
| 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**. |
| 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**. |
