PhoneInput

The PhoneInput component allows users to enter their phone number.

View source code

callingCode
```
string
```
The calling code for the phone number (e.g. +33)
countries
```
Country[]
```
The list of countries to display in the country dropdown of the phone input
country
```
string
```
The selected country for the phone number (e.g. FR)
formatPhoneNumber
```
(value: string, country: string, callingCode: string) => string
```
Function which formats the phone number (for example with spaces or removing the leading zero)
onChange
```
(newValue: string) => void
```
Handler that is called when the value changes.
onSelectCountry
```
(selectedCountry: Country) => void
```
Handler that is called when the country changes.
value
```
string
```
The current value (controlled).
className
```
string
```
className for the element
fit
```
"content" | "parent"
```
Whether the PhoneInput should fit its parent or content
Default: content
id
```
string
```
The id of the PhoneInput
isDisabled
```
boolean
```
Whether the PhoneInput is disabled.
isInvalid
```
boolean
```
Whether the PhoneInput is invalid.
name
```
string
```
The name of the PhoneInput, used when submitting an HTML form
onBlur
```
FocusEventHandler<HTMLInputElement>
```
Handler that is called when the element loses focus.
onFocus
```
FocusEventHandler<HTMLInputElement>
```
Handler that is called when the element receives focus.
onKeyDown
```
KeyboardEventHandler<HTMLInputElement>
```
Handler that is called when a key is pressed.
placeholder
```
string
```
Temporary text that occupies the PhoneInput when it is empty.
ref
```
Ref<HTMLInputElement>
```