Phone number
We can use the phone_number component to input a phone number. By default, the component display a country selector with the following countries :
- France
- Belgium
- Germany
With the selected country, the component will display the placeholder for the phone number, and will visually format the phone number.
For example, if the user selects Belgium, the component will display the phone number input with the placeholder +32 XXX XX XX XX, and will visually format the phone number as +32 047 41 21 21.
If the user selects France, the component will display the phone number input with the placeholder +33 X XX XX XX XX, and will visually format the phone number as +33 06 01 02 03 04.
If the user selects Germany, the component will display the phone number input with the placeholder +49 XX XXXXXX, and will visually format the phone number as +49 0176 12345678.
{
"phone_number": {
"component": "phone_number",
"label": "Phone Number"
}
}
The component generate the following data :
{
"phone_number": {
"number": "+32474121212",
"country": "be"
}
}
Validations
To validate the phone number, there is a validation rule called phone_number, that will validate the phone number against the international phone number format.
{
"phone_number": {
"component": "phone_number",
"label": "Phone Number",
"validations": ["phone_number"]
}
}
As the component generates an object, to make a phone number required, we can use the required_phone_number validation rule. This will ensure that the object is not empty, and that the number and country are not empty.
{
"phone_number": {
"component": "phone_number",
"label": "Phone Number",
"validations": ["required_phone_number"]
}
}
Options
We can customize the countries displayed in the country selector with the countries option.
The code is the ISO 3166-1 alpha-2 code of the country.
The placeholder is the placeholder for the phone number input.
The defaultCountry is the default country selected when the component is rendered.
By default, the default country is Belgium.
{
"phone_number": {
"component": "phone_number",
"label": "Default french",
"validations": ["phone_number"],
"options": {
"countries": [
{
"code": "fr",
"placeholder": "+33 X XX XX XX XX"
},
{
"code": "be",
"placeholder": "+32 XXX XX XX XX"
},
{
"code": "de",
"placeholder": "+49 XX XXXXXX"
}
],
"defaultCountry": "fr"
}
}
}
If only one country is displayed, the flag will be displayed but the country selector will not be displayed.
{
"phone_number": {
"component": "phone_number",
"label": "Default country",
"validations": ["phone_number"],
"options": {
"countries": [
{
"code": "be",
"placeholder": "+32 XXX XX XX XX"
}
]
}
}
}