Skip to main content

Component Props — PhoneInputProps

Source: lib/interfaces/phoneInputProps.ts

PropTypeDescription
themeIThemeTheme configuration for the component
languageILanguageLanguage for country names and UI
defaultPhoneNumberstringDefault phone number value (format: +(country code)(area code)(number))
defaultValuestringDeprecated alias of defaultPhoneNumber
valuestringControlled phone number value
onChangePhoneNumber(phoneNumber: string) => voidCallback fired when the phone number changes
defaultCountryICountryCca2Default selected country (ISO 3166-1 alpha-2)
countryICountry | nullControlled selected country
onChangeCountry(country: ICountry) => voidCallback fired when selected country changes
onPhoneNumberTypeChange(type: PhoneNumberType | null) => voidCallback fired when the detected phone-number line type changes (MOBILE, FIXED_LINE, TOLL_FREE, etc). Returns null for incomplete or invalid numbers.
onValidationChange(isValid: boolean, type: PhoneNumberType | null, country: ICountry) => voidCallback fired on validity transitions (does not fire on mount).
placeholderstringPlaceholder text for phone input (overrides placeholderType)
placeholderType'number' | 'text'When 'number' (default), shows a real example number for the current country as placeholder. 'text' keeps the legacy translated placeholder.
phoneInputPlaceholderTextColorstringColor of placeholder text
phoneInputSelectionColorstringColor of text selection
phoneInputStylesIPhoneInputStylesCustom styles for phone input component
modalStylesICountrySelectStylesCustom styles for country selection modal
disabledbooleanDisable the entire phone input
modalDisabledbooleanDisable only the country selection modal
customMaskstringCustom phone number mask (format like this: (###) ###-####)
visibleCountriesICountryCca2[]Array of country codes to show in modal
hiddenCountriesICountryCca2[]Array of country codes to hide from modal
popularCountriesICountryCca2[]Array of country codes to show in popular section
customCaret() => ReactNodeCustom dropdown arrow component
customFlag(country: ICountry) => ReactNodeCustom flag component to replace default flag emoji
rtlbooleanEnable right-to-left layout
isFullScreenbooleanShow modal in full screen mode
modalType'bottomSheet' | 'popup'Type of modal presentation
modalDragHandleIndicatorComponent() => ReactNodeCustom drag handle indicator component
modalSearchInputPlaceholderTextColorstringColor of modal search placeholder text
modalSearchInputPlaceholderstringPlaceholder text for modal search input
modalSearchInputSelectionColorstringColor of modal search text selection
modalPopularCountriesTitlestringTitle for popular countries section
modalAllCountriesTitlestringTitle for all countries section
modalSectionTitleComponent(item: ISectionTitle) => ReactElementCustom section title component
modalCountryItemComponent(item: ICountry) => ReactElementCustom country item component
modalCloseButtonComponent() => ReactNodeCustom close button component
modalSectionTitleDisabledbooleanDisable section titles in modal
modalNotFoundCountryMessagestringMessage when no countries found
disabledModalBackdropPressbooleanDisable modal close on backdrop press
removedModalBackdropbooleanRemove modal backdrop entirely
onModalBackdropPress(closeModal: () => void) => voidCallback when modal backdrop is pressed
onModalRequestClose() => voidCallback when modal close is requested
showModalAlphabetFilterbooleanShow alphabet filter in modal
showModalSearchInputbooleanShow search input in modal
showModalCloseButtonbooleanShow close button in modal
showModalScrollIndicatorbooleanShow scroll indicator in modal
allowFontScalingbooleanAllow font scaling based on device settings (default: true)
initialBottomsheetHeightnumber | stringInitial height of the bottom sheet modal
minBottomsheetHeightnumber | stringMinimum height of the bottom sheet modal
maxBottomsheetHeightnumber | stringMaximum height of the bottom sheet modal
refRef<IPhoneInputRef>Ref to access national/international values, country, isValidPhoneNumber and native input methods

See also: Ref properties, Hooks, Utilities.