➡️ ➡ ➡️ 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. | defaultCountry? | string | Country code to be displayed on mount. | 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