Phone Input

The Phone Input component can be used to capture and validate phone number from the user.

Schema

[
    {
        "name": "phone_number",
        "meta": {
            "displayName": "Phone Number",
            "description": "Phone Number Input Field",
            "displayType": "phone",
            "placeholder": "Enter Phone Number",
            "validation": {
                "required": true,
                "matchIsValidTel": true // false to disable
            },
            "readOnly": false,
            "htmlProps": {
                "disabled": false,
                "defaultCountry": "US", // US, CA, MX, IN, ...
                "onlyCountries": ["US", "CA", "IN"],
                "continents": ["NA", "SA", "AS"], // EU, NA, SA, AS, OC, AF
                "allowDynamic": true,
                "preferredCountries": ["US", "IN"]
            },
            "value": "+12124567890"
        }
    }
]

Example

Form Data:

{}

Field properties

Name	Description	Type
`defaultCountry`	Sets the selected country on component mount. Is Mandatory Field	string
`excludedCountries`	Country codes to be excluded of the list of countries.	string[]
`onlyCountries`	Country codes to be included in the list of countries.	string[]
`preferredCountries`	Country codes to be highlighted to the top of the list of countries.	string[]
`continents`	Continent codes to include a group of countries.	string[]
`displayType`	The type of control, which defines how the input is presented (e.g., "phone").	string
`displayName`	The display name of the control, shown as a label or header.	string
`placeholder`	The placeholder text for the input field, guiding the user on what to enter.	string
`required`	A boolean indicating if the control is required.	boolean
`matchIsValidTel`	A boolean indicating if phone number validation is required when the field is out of focus	boolean
`disabled`	A boolean indicating if the control is disabled.	boolean
`readOnly`	A boolean indicating if the control is readonly.	boolean

Continent Codes Supported

Codes	Continents
AF	Africa
AS	Asia
EU	Europe
NA	North America
OC	Oceania
SA	South America

Countries Codes Supported :

To view all the country codes, visit the ISO-3166 Country Codes page.

Here are some JSON samples for different configurations of the file upload control:

Sample 1: Basic Phone Input

{
    "name": "phone_number",
    "meta": {
        "displayName": "Phone Number",
        "description": "Phone Number Input Field",
        "displayType": "phone",
        "placeholder": "Enter Phone Number",
        "validation": {
            "required": true,
            "matchIsValidTel": false
        },
        "readOnly": false,
        "htmlProps": {
            "disabled": false,
            "defaultCountry": "US" // US, CA, MX, IN, ...
        },
        "value": "+12124567890"
    }
}

Sample 2: Phone Input with onlyCountries and continents

{
    "name": "phone_number",
    "meta": {
        "displayName": "Phone Number",
        "description": "Phone Number Input Field",
        "displayType": "phone",
        "placeholder": "Enter Phone Number",
        "validation": {
            "required": true,
            "matchIsValidTel": true // false to disable
        },
        "readOnly": false,
        "htmlProps": {
            "disabled": false,
            "defaultCountry": "US", // US, CA, MX, IN, ...
            "onlyCountries": ["US", "CA", "IN"], // Always include defaultCountry in onlyCountries field
            "continents": ["NA", "SA", "AS"], // Always include all continents that contain all countries from defaultCountry and onlyCountries field
            "preferredCountries": ["US", "IN"] // Always keep preferredCountries from onlyCountries field
        },
        "value": "+12124567890"
    }
}

Sample 2: Phone Input with excludedCountries and continents

{
    "name": "phone_number",
    "meta": {
        "displayName": "Phone Number",
        "description": "Phone Number Input Field",
        "displayType": "phone",
        "placeholder": "Enter Phone Number",
        "validation": {
            "required": true,
            "matchIsValidTel": true
        },
        "readOnly": false,
        "htmlProps": {
            "disabled": false,
            "defaultCountry": "IN",
            "excludedCountries": ["US", "CA"], // Never include defaultCountry & onlyCountries values in excludedCountries field
            "continents": ["NA", "SA", "AS"], // Always include all continents that contain all countries from defaultCountry
            "preferredCountries": ["IN"] // Always keep preferredCountries from onlyCountries field
        },
        "value": "+917892345678"
    }
}

Field Properties - Validation Details

The validation settings within the Textarea component are crucial for ensuring that user input meets specific requirements. Here’s a breakdown of the available validation properties:

`Property`	`Description`
`required`	Boolean value that specifies whether entering data into the field is mandatory.
`minLength`	Specifies the minimum number of characters allowed in the input.
`maxLength`	Specifies the maximum number of characters allowed in the input.
`min`	Specifies the minimum value allowed for number inputs, with support for dynamic values.
`max`	Specifies the maximum value allowed for number inputs, also supporting dynamic conditions.
`pattern`	A regex pattern that the input must match to be considered valid.
`validate`	A function for custom validation logic, which can return a boolean or an error message.
`matchIsValidTel`	Boolean value that specifies whether or not to validate the input as a phone number.

Example Usage of Validation Properties

{
    "name": "phone_number",
    "meta": {
        "displayName": "Phone Number",
        "description": "Phone Number Input Field",
        "displayType": "phone",
        "placeholder": "Enter Phone Number",

        "validation": {
            "required": true,
            "minLength": 10,
            "maxLength": 300,
            "min": 10,
            "max": 300,
            "matchIsValidTel": true
            "pattern": "/^[a-zA-Z0-9 .,'-]+$/",
        },
        "readOnly": false,
        "htmlProps": {
            "disabled": false,
            "defaultCountry": "IN",
            "excludedCountries": ["US", "CA"], // Never include defaultCountry & onlyCountries values in excludedCountries field
            "continents": ["NA", "SA", "AS"], // Always include all continents that contain all countries from defaultCountry
            "preferredCountries": ["IN"] // Always keep preferredCountries from onlyCountries field
        },
        "value": "+917892345678"
    }
}

Schema​

Example​

Field properties​

Continent Codes Supported​

Countries Codes Supported :​

Sample 1: Basic Phone Input​

Sample 2: Phone Input with onlyCountries and continents​

Sample 2: Phone Input with excludedCountries and continents​

Field Properties - Validation Details​

Example Usage of Validation Properties​