Phone Input
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.
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 }
Overrides
Additionally, you can fully customize any part of the Phone Input through the overrides prop. The Phone Input consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:
Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!
PhoneInput API
Warning any = "Prop types are not shown in dev mode"
extract-react-types is not being run in dev mode for speed reasons. If you need to
see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES
eg:
FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>
StatefulPhoneInput API
Warning any = "Prop types are not shown in dev mode"
extract-react-types is not being run in dev mode for speed reasons. If you need to
see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES
eg:
FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>
StatefulPhoneInputContainer API
Warning any = "Prop types are not shown in dev mode"
extract-react-types is not being run in dev mode for speed reasons. If you need to
see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES
eg:
FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>
CountrySelect API
Warning any = "Prop types are not shown in dev mode"
extract-react-types is not being run in dev mode for speed reasons. If you need to
see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES
eg:
FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>
CountrySelectDropdown API
Warning any = "Prop types are not shown in dev mode"
extract-react-types is not being run in dev mode for speed reasons. If you need to
see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES
eg:
FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>