API Reference

This article discusses the API and props of HeroTelInput. Props are defined within HeroTelInputProps.

Name	Type	Default
`onChange`	`HeroTelInputOnChange` Gets called once the user updates the tel value. The callback gives you 2 parameters: The new tel value stringified An object of different useful informations about the tel (country, extension, etc..)
`label`	`React.ReactNode` Label for the input field. Rendered as a Label component inside the TextField.
`placeholder`	`string` Placeholder text for the input.
`description`	`React.ReactNode` Description text to display below the input.
`errorMessage`	`React.ReactNode` Error message to display below the input. Rendered as a FieldError component.
`forceCallingCode`	`boolean \| undefined` Displays the calling code (e.g: +33) as read-only next to the flag and with a divider instead of as part of the input field. Needs defaultCountry prop to be defined or will default to US.
`defaultCountry`	`CountryCode` Sets the selected country on component mount
`onlyCountries`	`CountryCode[]` Country codes to be included in the list of countries.
`excludedCountries`	`CountryCode[]` Country codes to be excluded of the list of countries.
`preferredCountries`	`CountryCode[]` Country codes to be highlighted to the top of the list of countries.
`disableDropdown`	`boolean` No country list / The current flag is a span instead of a button.
`langOfCountryName`	`string` An Intl locale to translate country names (see Intl locales). All countries will be translated in this language.
`disableFormatting`	`boolean` Remove format (spaces..) from the input value.	`false`
`focusOnSelectCountry`	`boolean` Autofocus the input when the user selects a country in the list.	`true`
`continents`	`HeroTelInputContinent[]` Continent codes to include a group of countries.
`unknownFlagElement`	`React.ReactNode` This prop let you to customize the unknown flag, changed the width or height, use CDN or SVG component, etc..
`searchAriaLabel`	`string` The aria-label of the search input.	`"Search countries"`
`searchPlaceholder`	`string` The placeholder of the search input.	`"Search countries..."`
`activedCountryInTop`	`boolean` The actived country code to be highlighted to the top of the list of countries.	`true`

Custom classNames

Name	Type	Default
`dialog`	`string`
`dialogContent`	`string`
`menuItem`	`string`
`textField`	`string`
`searchInput`	`string`
`modal`	`string`
`overlay`	`string`
`input`	`any`