A Phone number widget is a form input field designed specifically to capture and validate international or local phone numbers. It provides built-in formatting, country-specific validation, and optional restrictions on which countries are selectable.
The Custom Phone Number Component allows users to enter phone numbers in a structured, validated way. Key features include:
Label & Placeholder: Configurable label for the input field.
Required Field: Can enforce mandatory entry with a customizable error message.
Country Handling:
preferredCountries: List of countries to prioritize in the UI.onlyCountries: Restrict input to specific countries.excludeCountries: Exclude certain countries from selection.initialCountry: Preselect a default country.countryNoValidation: Disable country code validation if needed.allowDropdown: Enable or disable a dropdown for country selection.Validation:
invalidNumber).invalidNumberFormat.Use Cases: International forms, contact details collection, OTP verification, registration forms, and any form requiring structured phone number input.
This component ensures phone numbers conform to expected formats per country, improves UX by guiding users, and reduces errors caused by invalid numbers.
Complete JSON Object
{
"key": "InputKey",
"type": "customphonenumber",
"props": {
"label": "Input Name",
"required": true,
"id":"telephone",
"countryNoValidation":true,
"preferredCountries":[ "rw", "ug", "ke", "tz"],
"allowDropdown":false,
"onlyCountries":["rw"],
"initialCountry": "rw"
"excludeCountries":["af"]
},
"validation": {
"messages": {
"required": "Error message for `required`",
"invalidNumber": "Provided number is invalid"
}
},
"validators": {
"validation": ["invalidNumberFormat"]
}
}
Allowed Custom Properties
Allowed Validations