Phone Input
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.
Properties
Property | Description | Expected Value |
|---|---|---|
| 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. A value without a leading + is treated as a national number for the Default Country. A value starting with + is read as an international number. | String (e.g., (999) 999-9999 or +19999999999). |
| 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. |
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 it using an event or use a RunJS query.
Action | Description | RunJS Query |
|---|---|---|
| setValue( ) | Sets the value of the Phone Input field. Pass the national number or a full international number. An optional second argument sets the country by its ISO code. | components.phoneinput1.setValue("9876543210", "IN") |
| clear( ) | Clears the input field. | components.phoneinput1.clear() |
| setFocus( ) | Sets the focus of the cursor on the input field. | components.phoneinput1.setFocus() |
| setBlur( ) | Removes focus from the input field. | components.phoneinput1.setBlur() |
| setVisibility( ) | Sets the visibility of the component. | components.phoneinput1.setVisibility(false) |
| setLoading( ) | Sets the loading state of the component. | components.phoneinput1.setLoading(true) |
| setDisable( ) | Disables the component. | components.phoneinput1.setDisable(true) |
| setCountryCode( ) | Sets the country. Accepts an ISO country code (e.g., "US") or a dial code (e.g., "+1"). The number entered is kept and moved to the new dial code. | components.phoneinput1.setCountryCode("US") |
Exposed Variables
| Variable | Description | How To Access |
|---|---|---|
| value | Holds the full number in E.164 format (e.g., +919876543210). Empty when the field is empty. | {{components.phoneinput1.value}} |
| label | Holds the value of the component's label. | {{components.phoneinput1.label}} |
| isValid | Indicates if the input meets validation criteria. | {{components.phoneinput1.isValid}} |
| isMandatory | Indicates if the field is required. | {{components.phoneinput1.isMandatory}} |
| isLoading | Indicates if the component is loading. | {{components.phoneinput1.isLoading}} |
| isVisible | Indicates if the component is visible. | {{components.phoneinput1.isVisible}} |
| isDisabled | Indicates if the component is disabled. | {{components.phoneinput1.isDisabled}} |
| country | Holds the ISO code of the selected country (e.g., IN). | {{components.phoneinput1.country}} |
| countryCode | Holds the selected country’s dial code (e.g., +91). | {{components.phoneinput1.countryCode}} |
| domesticNumber | Holds the national number without the dial code, as digits only (e.g., 9876543210). Use it when you need the number independent of the selected country. Empty when the field is empty. | {{components.phoneinput1.domesticNumber}} |
| formattedValue | The value with the exact format shown in the phone input. Empty when the field is empty. | {{components.phoneinput1.formattedValue}} |
Validation
Validation Option | Description | Expected Value |
|---|---|---|
| Make this field mandatory | Displays a 'Field cannot be empty' message if no value is entered. The message also appears as soon as the field is emptied with the clear button or the clear() action. Resetting a Form clears the field without showing the message. | 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 number. It is checked against the national number without the dial code (domesticNumber). | Regular Expression Pattern (e.g., ^\d{1,10}$ ). |
| Min length | Sets the minimum number of digits allowed, not counting the dial code. | Integer (e.g., 10 for a minimum of 10 digits). |
| Max length | Sets the maximum number of digits allowed, not counting the dial code. | Integer (e.g., 10 for a maximum of 10 digits). |
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., {{components.phoneinput1.domesticNumber.length !== 10 && "Phone number must be 10 digits"}}). |
To add regex inside Custom Validation, you can use the below format:
Format: {{(<regexPattern>.test(<value>)) ? '' : 'Error message'}}
Example: {{(/^\d{1,10}$/.test(components.phoneinput1.domesticNumber)) ? '' : 'Error message'}}
value includes the + and the dial code, so test domesticNumber when you check the digits the user typed.
Additional Actions
Action | Description | Configuration Options |
|---|---|---|
| Enable clear button | Shows a clear button inside the field while it has a value. Clicking it clears the value. The button is hidden while the component is disabled or loading. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| 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. |
| Collapse when hidden | Collapses the component's space when it is hidden, so surrounding components fill the space. Takes effect when the app runs (preview or released app), not on the editor canvas. | Enable/disable the toggle button or dynamically configure the value by clicking on 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. Supports Plain text, Markdown, and HTML formats. | String (e.g., Enter the contact number ). |
Devices
Property | Description | 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
Label Property | Description | 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. |
| Size | Sets the font size of the label, in pixels. Defaults to 12. | Enter a number or click on fx and enter code that returns a number. |
| 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. |
| Direction | When alignment is set to side, places the label to the left or right of the field. | Select Left or Right using the icon toggles. |
| 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
Field Property | Description | 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 border color of the input field and the country selector while the field is focused. A validation error border takes priority. | 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
Padding
Allows you to maintain a standard padding by enabling the Default option.
Advanced
Property | Description | Configuration Options |
|---|---|---|
| CSS class | Adds a custom CSS class to the component, which can be targeted using Custom Styles for advanced styling. | Enter one or more class names. |
info
The Advanced section is available only if your plan has the Custom Styles feature enabled.
Deprecated styles
Property | Description | Configuration Options |
|---|---|---|
| Legacy input size | Keeps the canvas sizing that input components used before this setting was added. When on, a top-aligned label always adds height to the component, even when the label is empty, and the component's height doesn't change when the label alignment is set with fx. When off, a top-aligned label adds height only when the label has text. | Enable/disable the toggle button. Off for new components. Turned on for components that existed before this setting was added, including components in imported apps. |