Phone Input

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

Examples

A basic phone input with US as default country

Phone Number

​

​

Phone Number Input Field

---

---

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.

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.