Installation

// with npm
npm install mui-tel-input

// with yarn
yarn add mui-tel-input

Usage

1import React from 'react'
2import { MuiTelInput } from 'mui-tel-input'
3
4const MyComponent = () => {
5  const [value, setValue] = React.useState('')
6
7  const handleChange = (newValue) => {
8    setValue(newValue)
9  }
10
11  return <MuiTelInput value={value} onChange={handleChange} />
12}

Phone number validation

1import React from 'react'
2import Box from '@mui/material/Box'
3import Typography from '@mui/material/Typography'
4import { MuiTelInput, isValidPhoneNumber } from 'mui-tel-input'
5
6const MyComponent = () => {
7  const [value, setValue] = React.useState('')
8  const [isValid, setIsValid] = React.useState(false)
9
10  const handleChange = (newValue) => {
11    setIsValid(isValidPhoneNumber(newValue))
12    setValue(newValue)
13  }
14
15  return (
16    <Box>
17      <Typography>This is valid ? {isValid ? 'yes' : 'no'}</Typography>
18      <MuiTelInput value={value} onChange={handleChange} />
19    </Box>
20  )
21}

Props

Name	Type	Description
value	string	The phone number value (Required)
onChange?	(value, info) => void	Gets called once the user updates the input or selects a new country.
onlyCountries?	array	Country codes to be included.
excludedCountries?	array	Country codes to be excluded.
preferredCountries?	array	Country codes to be highlighted to the top of the list of countries.
continents?	array	Continent codes to include a list of countries.
forceCallingCode?	boolean	Force the calling code (e.g: +33) to be displayed so the value cannot be empty. Default false.
focusOnSelectCountry?	boolean	Autofocus the input when the user selects a country in the list. Default false.
disableDropdown?	boolean	No country list / The current flag is a span instead of a button. Default false.
disableFormatting?	boolean	Remove format (spaces..) from the input value. Default false.
langOfCountryName?	string	An Intl locale to translate countries (see Intl locales). Default en.
MenuProps?	Menu API	Props for the Menu component.
ref?	React.Ref<HTMLDivElement>	A ref pointing to the Mui TextField component.
TextField Props

Inheritance

While not explicitly documented above, the props of the TextField component are also available on MuiTelInput.

CSS

Global class	Description
.MuiTelInput-TextField	Styles applied to the root element.
.MuiTelInput-IconButton	Styles applied to the IconButton of the current flag.
.MuiTelInput-Flag	Styles applied to a flag.
.MuiTelInput-Menu	Styles applied to Menu component.
.MuiTelInput-MenuItem	Styles applied to a flag item of the Menu.
.MuiTelInput-ListItemIcon-flag	Styles applied to the ListItemIcon of a flag item
.MuiTelInput-ListItemText-country	Styles applied to the ListItemText of a flag item
.MuiTelInput-Typography-calling-code	Styles applied to the calling code of a flag item

You can override the style of the component with a global class name.

Country code

A "country code" is a two-letter ISO country code (like US).

This library supports all officially assigned ISO alpha-2 country codes, plus a few extra ones like: AC (Ascension Island), TA (Tristan da Cunha), XK (Kosovo).

Continent code

Code	Continent
AF	Africa
AS	Asia
EU	Europe
NA	North America
OC	Oceania
SA	South America
OC	Oceania

TypeScript

This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

LICENSE

MIT