PhoneInput

The PhoneInput is a component to input a phone number in international format.

The component consists of two controls: a select to pick a prefix and an input to type in the phone number. The select shows all the country codes available world-wide.

Properties

NameTypeDefault
variant

"boxed" | "bottom-lined"

"boxed"
size

"medium" | "small"

"medium"
id

string

Prefix for the identifier of area code and national number inputs
text

string

National number text value
onTextChange

(event: React.ChangeEvent<HTMLInputElement>) => void

Change handler for national number text input
country

PhoneAreaCodeCountry

Country object for determining the area code
onCountryChange

(country: PhoneAreaCodeCountry) => void

Change handler for the area code country
label

string

placeholder

string

error

boolean

Indicate the error state in the input
disabled

boolean

Disables both, the area code and national number inputs
listPortalTarget

HTMLElement

HTML element which will be used as a parent for the prefix list
inputProps

Object

Pass props directly to the internal input component. Any value from the `Input` component props are allowed, but props from the `PhoneInput` take precedence
selectListProps

Object

Pass props directly to the internal SelectList component used to show prefixes. Any value from the `SelectList` component props are allowed, but props from the `PhoneInput` take precedence

The PhoneInput supports margin and width styled-system props.

Examples

+49
const [nationalNumber, setNationalNumber] = React.useState('');
const [country, setCountry] = React.useState(COUNTRIES.find(it => it.value == 'DE'));
return (
<PhoneInput
id="phone-input-example"
text={nationalNumber}
country={country}
onCountryChange={c => setCountry(c)}
onTextChange={event => setNationalNumber(event.target.value)}
/>
);

Playground

Troubleshooting

The list of prefixes is not fully visible

If the list of prefixes is not fully visible when opened, like in this Sandbox example, use listPortalTarget prop to attach the popup to the document's body:

<PhoneInput listPortalTarget={document.body} />

The reason of the issue is that the prefix selection popup is rendered inside the same container as the component by default. If the container does not allow content to overflow (e.g. via overflow: hidden;), everything that overflows the container borders will be hidden.