Phone Input

({option}) => setCountry(option)

e => setText(e.currentTarget.value)

import * as React from "react";
import { PhoneInput } from "baseui/phone-input";

export default () => {
  const [country, setCountry] = React.useState(undefined);
  const [text, setText] = React.useState("");
  return (
    <PhoneInput
      country={country}
      onCountryChange={({ option }) => setCountry(option)}
      text={text}
      onTextChange={e => setText(e.currentTarget.value)}
    />
  );
}

The Phone Input is used to collect phone numbers with international dial codes. It contains a dropdown which allows the user to choose from a list of countries and dial codes.

Examples

With flag overrides and virtualized dropdown list

+1

CodeStackBlitz

Click here to learn more about nested overrides.

As with many of our components, there is also an uncontrolled version, StatefulPhoneInput, which manages its own state.

Supported Countries

The following countries are available in the country selector dropdown. You can import these as an object COUNTRIES from baseui/phone-input. Note, the country objects are formatted for ease of use with our Select component.

COUNTRIES: {
  id: string,      // Country ISO
  label: string,   // Country Name
  dialCode: string // Country Dial Code
}

Phone Input exports

You can import this module like so:

import {COUNTRIES} from 'baseui/phone-input'

It exports the following components or utility functions:

• COUNTRIES
• CountryPicker
• DEFAULT_MAX_DROPDOWN_HEIGHT
• DEFAULT_MAX_DROPDOWN_WIDTH
• Flag
• PhoneInput
• PhoneInputLite
• SIZE
• STATE_CHANGE_TYPE
• StatefulPhoneInput
• StatefulPhoneInputContainer
• StyledCountrySelectContainer
• StyledCountrySelectDropdownContainer
• StyledCountrySelectDropdownDialcodeColumn
• StyledCountrySelectDropdownFlagColumn
• StyledCountrySelectDropdownListItem
• StyledCountrySelectDropdownListItemElement
• StyledCountrySelectDropdownNameColumn
• StyledDialCode
• StyledFlag
• StyledFlagContainer
• StyledPhoneInputRoot
• StyledRoot