MUI tel input

A phone number input designed for the React library MUI

➡️ ➡ ➡️ DEMO ⬅️ ⬅️ ⬅️

Installation

// with npm
npm install mui-tel-input

// with yarn
yarn add mui-tel-input

Usage

import React from 'react'
import { MuiTelInput } from 'mui-tel-input'

const MyComponent = () => {
  const [value, setValue] = React.useState('')

  const handleChange = (newValue) => {
    setValue(newValue)
  }

  return <MuiTelInput value={value} onChange={handleChange} />
}

Phone number validation

import React from 'react'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import { MuiTelInput, isValidPhoneNumber } from 'mui-tel-input'

const MyComponent = () => {
  const [value, setValue] = React.useState('')
  const [isValid, setIsValid] = React.useState(false)

  const handleChange = (newValue) => {
    setIsValid(isValidPhoneNumber(newValue))
    setValue(newValue)
  }

  return (
    <Box>
      <Typography>This is valid ? {isValid ? 'yes' : 'no'}</Typography>
      <MuiTelInput value={value} onChange={handleChange} />
    </Box>
  )
}

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