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.
| 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`). |
| 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. |
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use 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. |
| 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. |
| Icon | Allows you to select an icon for the component. | Enable the icon visibility, and select the icon and icon color. Alternatively, set it programmatically using **fx**. |
| 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**. |
