The **Phone Input** component allows users to enter and validate phone numbers. It can be used as a standalone input or within **Form** where phone number collection is required. The component supports international formats, auto-formatting, and validation to ensure accurate data entry. In this document, we'll go through all the configuration options for the **Phone Input** component.
| Label | Text to display as the label for the field. | String (e.g., `Contact Number`). |
| Placeholder | A hint displayed to guide the user on what to enter. | String (e.g., `Please enter your contact number`). |
| Default Value | The default value that the component will hold when the app is loaded. | String (e.g., `(999) 999-9999`). |
| Default Country | Sets the default country code to be used. | Select the default country from the dropdown or update it dynamically using **fx**. |
| Enable country change | Allows the user to select a different country code from the dropdown. If disabled, the user can enter only the default country code. | 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 the value by clicking on **fx** and entering a logical expression. |
| Regex | Regular Expression to validate the input. | Regular Expression Pattern (e.g., `^\d{1,10}$` ). |
| Min length | Sets the minimum number of characters allowed. | Integer (e.g., `10` for a minimum of 10 characters). |
| Max length | Sets the maximum number of characters allowed. | Integer (e.g., `10` for a maximum of 10 characters). |
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., `{{components.phoneinput1.value.length === 10&&"Phone number must be 10 digits"}}`). |
| 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 contact number` ). |
| 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**. |
