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

Name	Type	Default
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

Mobile Phone Number

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

<ControlledPhoneInput label="Mobile Phone Number" />

<ControlledPhoneInput label="Mobile Phone Number" />

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.