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.
key
```
Key
```
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<HTMLButtonElement>
```
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}