https://github.com/viclafouch/mui-tel-input

📌 A phone number input designed for MUI (Material ui) built with libphonenumber-js
https://github.com/viclafouch/mui-tel-input

material-ui mui number phone-number react typescript

Last synced: about 1 month ago
JSON representation

📌 A phone number input designed for MUI (Material ui) built with libphonenumber-js

• Host: GitHub
• URL: https://github.com/viclafouch/mui-tel-input
• Owner: viclafouch
• License: mit
• Created: 2022-03-12T09:17:31.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2025-04-14T08:12:33.000Z (2 months ago)
• Last Synced: 2025-05-11T08:01:56.819Z (about 1 month ago)
• Topics: material-ui, mui, number, phone-number, react, typescript
• Language: TypeScript
• Homepage: https://viclafouch.github.io/mui-tel-input
• Size: 6.47 MB
• Stars: 190
• Watchers: 2
• Forks: 75
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  





Material UI tel input

  
A phone number input designed for the React library Material UI





[![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)



  





## Installation

```

// with npm

npm install mui-tel-input

// with yarn

yarn add 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 

}

```

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

/** @type {import('next').NextConfig} */

const nextConfig = {

 transpilePackages: ['mui-tel-input'],

 // your config

}

module.exports = 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