PhoneInput
A phone number input with country dial code selection.Use the <PhoneInput /> component when you need to collect a phone number with an international dial code. Users can easily search and select their country, after which the dial code will get prepended to the input value.
If you change the input value, from +61 to +46 for example, then the country dial code selection will change as well. NOTE: The country code must start with + to get recognised and matched.
The <PhoneInput /> relies on being controlled with state. You “own” the state, which is managed by providing handlers to the component. If you need an uncontrolled tel input, use <TextInput type="tel" />
Use the native onChange prop to control the phone input's value.
The input supports two sizes, small and medium (default). Prefer using size consistently with other form controls that support the same sizes.
Use the placeholder prop to provide a hint or example of what the user can enter.
Use the disabled prop when the user shouldn't be able to manipulate the value of the input.
Use the invalid prop to communicate that validation has failed for this particular input.
The <PhoneInput /> also supports the following native InputHTMLAttributes (see props for a full list):
- onBlur
- onFocus
- placeholder