PhoneNumberInput

Collects a phone number: a country selector next to the national digits.

Open in Storybook

The stored value is always the full international number (+420123456789); the split into country code and national part exists only in the UI.

Example

<PhoneNumberInput
  source="phone"
  defaultRegion="CZ"
  allowedRegions={['CZ', 'SK']}
/>

Props

Name	Type	Default	Description
source (required)	string	—	Name of the field in the form record
label	string | ReactElement | false	label from the schema	false hides the label
helperText	string | ReactElement | false	helpText from the schema	Text under the input
validate	Validator | Validator[]	from the schema	React Admin validators
fullWidth	boolean	true	Stretches the input to its container
placeholder	string	—	Placeholder for the national part
defaultRegion	string	first allowed region	Country preselected for an empty value
allowedRegions	string[]	all known regions	Restricts the country selector

The schema layer maps options.phone.defaultRegion and options.phone.allowedRegions onto the two props above before rendering this component directly.

Digits are grouped as you type according to the selected country, and the caret keeps its place among the digits rather than jumping over the separators. Clearing the national part stores null.

Schema mapping

type: "string" with format: "phone":

{"name": "phone", "type": "string", "format": "phone",
 "options": {"phone": {"defaultRegion": "CZ", "allowedRegions": ["CZ", "SK"]}}}

Python

from django.db import models
from habarico.models import PhoneNumberField


class Customer(models.Model):
    name = models.CharField(max_length=255)
    phone = PhoneNumberField(region="CZ", allowed_regions=["CZ", "SK"], blank=True)

Ruby

See also

• PhoneNumberField — the display counterpart
• Czech local flavor inputs — the other locale-specific inputs