# mui-tel-input

> A phone number input designed for the React library MUI built with libphonenumber-js

Latest version **11.0.0** (published 2026-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install mui-tel-input
pnpm add mui-tel-input
yarn add mui-tel-input
bun add mui-tel-input
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 11.0.0 |
| Published | 2026-04-24 |
| First published | 2022-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 246.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 208 |
| Author | Victor de la Fouchardiere |
| Maintainers | viclafouch |
| Keywords | react, phone, typescript, format, number, input, telephone, mui, javascript, tel, material |

## Links

- npm: https://www.npmjs.com/package/mui-tel-input
- Repository: https://github.com/viclafouch/mui-tel-input
- Homepage: https://viclafouch.github.io/mui-tel-input
- Issues: https://github.com/viclafouch/mui-tel-input/issues
- npm.io page: https://npm.io/package/mui-tel-input

## Dependencies (1)

- [libphonenumber-js](https://npm.io/package/libphonenumber-js.md) ^1.12.41

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 11.0.0 (latest) — 2026-04-24
- 3.2.1-alpha.2 (alpha) — 2023-07-02
- 10.0.0 — 2026-03-30
- 9.0.1 — 2025-05-18
- 9.0.0 — 2025-04-14
- 8.0.1 — 2025-03-04
- 8.0.0 — 2025-02-28
- 7.0.0 — 2024-11-11
- 6.0.1 — 2024-09-14
- 6.0.0 — 2024-09-01
- 5.1.2 — 2024-02-16
- 5.1.1 — 2024-02-15
- 5.1.0 — 2024-02-14
- 5.0.1 — 2024-02-14
- 5.0.0 — 2023-12-02
- … 31 more at https://npm.io/package/mui-tel-input/versions

## README

<div align="center">
  <img src="https://viclafouch.github.io/mui-tel-input/img/logo.svg" width="80" />
</div>
<div align="center">
<h1>Material UI tel input</h1>
  <p>A phone number input designed for the React library <a href="https://mui.com/">MUI (Material UI)</a></p>
</div>
<div align="center">

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/viclafouch/mui-tel-input/blob/master/LICENSE)
![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)
[![npm](https://img.shields.io/npm/v/mui-tel-input)](https://www.npmjs.com/package/mui-tel-input)

<div align="center">
  <img src="https://github.com/viclafouch/mui-tel-input/blob/master/mui-tel-input.gif" width="100%" />
</div>

</div>

## Installation

```
npm install mui-tel-input
```

The component uses [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) for phone number parsing and formatting.

## Usage

```jsx
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} />
}
```

## Next.js integration

Learn how to use MUI Tel Input with [Next.js](https://nextjs.org/).

Once you have installed `MUI Tel Input` in your Next.js project, it is important to transpile it as it is an ESM package first.

```js
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['mui-tel-input'],
  // your config
}

export default nextConfig
```

## [Documentation](https://viclafouch.github.io/mui-tel-input/)

## Changelog

Go to [GitHub Releases](https://github.com/viclafouch/mui-tel-input/releases)

## 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

---
_Source: https://npm.io/package/mui-tel-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._