{"id":13805364,"url":"https://github.com/typesnippet/mui-phone-input","last_synced_at":"2026-04-07T04:32:36.286Z","repository":{"id":213082443,"uuid":"722188549","full_name":"typesnippet/mui-phone-input","owner":"typesnippet","description":"Advanced, highly customizable phone input component for Material UI.","archived":false,"fork":false,"pushed_at":"2025-11-01T11:08:03.000Z","size":156,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-22T21:13:33.877Z","etag":null,"topics":["advanced","component","customizable","input","material","material-ui","mui","number","phone","phone-number","react"],"latest_commit_sha":null,"homepage":"https://playground.typesnippet.org/mui-phone-input/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/typesnippet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-11-22T16:12:50.000Z","updated_at":"2025-11-01T10:29:41.000Z","dependencies_parsed_at":"2023-12-18T10:59:03.422Z","dependency_job_id":"10004fb9-25b9-459c-9486-6423eca37b58","html_url":"https://github.com/typesnippet/mui-phone-input","commit_stats":null,"previous_names":["typesnippet/mui-phone-input"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/typesnippet/mui-phone-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fmui-phone-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fmui-phone-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fmui-phone-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fmui-phone-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typesnippet","download_url":"https://codeload.github.com/typesnippet/mui-phone-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fmui-phone-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31500397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["advanced","component","customizable","input","material","material-ui","mui","number","phone","phone-number","react"],"created_at":"2024-08-04T01:01:00.472Z","updated_at":"2026-04-07T04:32:36.267Z","avatar_url":"https://github.com/typesnippet.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":[],"readme":"# MUI Phone Input \u003cimg src=\"https://github.com/typesnippet.png\" align=\"right\" height=\"64\" /\u003e\n\n[![npm](https://img.shields.io/npm/v/mui-phone-input)](https://www.npmjs.com/package/mui-phone-input)\n[![Playground](https://img.shields.io/badge/playground-blue.svg?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzEzNTE0OTc5MTUzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE2MjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc2OCA1MDYuMDI2NjY3djExLjk0NjY2NmEzMi40MjY2NjcgMzIuNDI2NjY3IDAgMCAxLTE1Ljc4NjY2NyAyNy43MzMzMzRMMzcwLjM0NjY2NyA3NjhjLTIzLjA0IDEzLjY1MzMzMy0zNC45ODY2NjcgMTMuNjUzMzMzLTQ1LjIyNjY2NyA3LjY4bC0xMC42NjY2NjctNS45NzMzMzNhMzIuNDI2NjY3IDMyLjQyNjY2NyAwIDAgMS0xNS43ODY2NjYtMjYuODhWMjgxLjE3MzMzM2EzMi40MjY2NjcgMzIuNDI2NjY3IDAgMCAxIDE1Ljc4NjY2Ni0yNy43MzMzMzNsMTAuNjY2NjY3LTUuOTczMzMzYzEwLjI0LTUuOTczMzMzIDIyLjE4NjY2Ny01Ljk3MzMzMyA1Mi4wNTMzMzMgMTEuNTJsMzc1LjA0IDIxOS4zMDY2NjZhMzIuNDI2NjY3IDMyLjQyNjY2NyAwIDAgMSAxNS43ODY2NjcgMjcuNzMzMzM0eiIgcC1pZD0iMTYyOCIgZGF0YS1zcG0tYW5jaG9yLWlkPSJhMzEzeC5zZWFyY2hfaW5kZXguMC5pMS40NzE5M2E4MVdiYjYyWiIgY2xhc3M9IiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==)](https://playground.typesnippet.org/mui-phone-input/)\n[![mui](https://img.shields.io/badge/mui-5.x%20%7C%206.x%20%7C%207.x-blue)](https://github.com/mui/material-ui)\n[![distro](https://img.shields.io/badge/distro-core%20|%20material%20|%20base%20|%20joy-blue)](https://mui.com/)\n[![types](https://img.shields.io/npm/types/mui-phone-input)](https://www.npmjs.com/package/mui-phone-input)\n[![License](https://img.shields.io/npm/l/mui-phone-input)](https://github.com/typesnippet/mui-phone-input/blob/master/LICENSE)\n[![Tests](https://github.com/typesnippet/mui-phone-input/actions/workflows/tests.yml/badge.svg)](https://github.com/typesnippet/mui-phone-input/actions/workflows/tests.yml)\n\n\u003cp\u003eAdvanced phone input component for Material UI that leverages the \u003ca href=\"https://www.npmjs.com/package/react-phone-hooks\"\u003ereact-phone-hooks\u003c/a\u003e supporting all countries. The package is compatible with \u003ca href=\"https://v4.mui.com/\"\u003e@material-ui/core\u003c/a\u003e, \u003ca href=\"https://mui.com/\"\u003e@mui/material\u003c/a\u003e, \u003ca href=\"https://mui.com/base-ui/getting-started/\"\u003e@mui/base\u003c/a\u003e and \u003ca href=\"https://mui.com/joy-ui/getting-started/\"\u003e@mui/joy\u003c/a\u003e distributions. It provides built-in support for area codes and strict validation.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://playground.typesnippet.org/mui-phone-input\"\u003e\n    \u003cimg src=\"https://github.com/typesnippet/mui-phone-input/assets/44609997/71a747c1-6682-488c-aa7f-01b47a228f8a\" alt=\"MUI Phone Input\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Value\n\nThe value of the component is an object containing the parts of the phone number. This format of value gives a wide range of opportunities for handling the data in your desired way.\n\n```javascript\n{\n  countryCode: 1,\n  areaCode: \"702\",\n  phoneNumber: \"1234567\",\n  isoCode: \"us\",\n  valid: function valid(strict)\n}\n```\n\n## Validation\n\nThe validation is checked by the `valid` function of the value object that returns a boolean value. An example with the [react-hook-form](https://www.npmjs.com/package/react-hook-form) is shown below:\n\n```javascript\nimport {useMemo, useState} from \"react\";\nimport {useForm} from \"react-hook-form\";\nimport PhoneInput from \"mui-phone-input\";\nimport {checkValidity, parsePhoneNumber} from \"react-phone-hooks\";\n\nconst Demo = () =\u003e {\n  const {register, handleSubmit} = useForm();\n  const [value, setValue] = useState({});\n\n  const phoneProps = register(\"phone\", {\n    validate: (value: any) =\u003e checkValidity(parsePhoneNumber(value)),\n  })\n\n  const onChange = async (value: any) =\u003e {\n    await phoneProps.onChange({target: {value, name: phoneProps.name}});\n    setValue(value);\n  }\n\n  const error = useMemo(() =\u003e value.valid \u0026\u0026 !value.valid(), [value]);\n\n  return (\n    \u003cform onSubmit={handleSubmit(console.log)}\u003e\n      \u003cPhoneInput\n        enableSearch\n        error={error}\n        {...phoneProps}\n        variant=\"filled\"\n        onChange={onChange}\n        searchVariant=\"standard\"\n      /\u003e\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  )\n}\n\nexport default Demo;\n```\n\nThe `valid` function primarily checks if a phone number has a length appropriate for its specified country. In addition, a more comprehensive validation can be performed, including verifying the dial and area codes' accuracy for the selected country. To activate the strict validation, pass `true` as the first argument to the `valid` function.\n\n## Localization\n\nThe package provides a built-in localization feature that allows you to change the language of the component. The `locale` function returns the language object that can be passed to the `createTheme` function of Material UI.\n\n```javascript\nimport {createTheme, ThemeProvider} from \"@mui/material/styles\";\nimport PhoneInput, {locale} from \"mui-phone-input\";\n\nconst theme = createTheme({}, locale(\"frFR\"));\n\n\u003cThemeProvider theme={theme}\u003e\n  \u003cPhoneInput/\u003e\n\u003c/ThemeProvider\u003e\n```\n\nNOTE: If you use localization in the [documented](https://mui.com/material-ui/guides/localization/) way, you should replace the language object with the `locale` function, specifying the desired language code.\n\n## Props\n\nApart from the phone-specific properties described below, all [Input](https://mui.com/material-ui/api/input/#props) and [TextField](https://mui.com/material-ui/api/text-field/#props) properties supported by the used Material distribution can be applied to the phone input component.\n\n| Property           | Description                                                                                                                   | Type                          |\n|--------------------|-------------------------------------------------------------------------------------------------------------------------------|-------------------------------|\n| value              | An object containing a parsed phone number or the raw number.                                                                 | [object](#value) / string     |\n| useSVG             | Whether to use **SVG** icons for the flags or keep the default. By default, it will use **PNG** icons.                        | boolean                       |\n| country            | Country code to be selected by default. By default, it will show the flag of the user's country.                              | string                        |\n| distinct           | Show the distinct list of country codes not listing all area codes.                                                           | boolean                       |\n| enableArrow        | Shows an arrow next to the country flag. Default value is `false`.                                                            | boolean                       |\n| enableSearch       | Enables search in the country selection dropdown menu. Default value is `false`.                                              | boolean                       |\n| searchVariant      | Accepts an Input variant, and values depend on the chosen Material distribution.                                              | TextFieldVariants             |\n| searchNotFound     | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string                        |\n| searchPlaceholder  | The value is shown if `enableSearch` is `true`. Default value is `Search country`.                                            | string                        |\n| disableDropdown    | Disables the manual country selection through the dropdown menu.                                                              | boolean                       |\n| disableParentheses | Disables parentheses from the input masks. Default enabled.                                                                   | boolean                       |\n| onlyCountries      | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`.                                          | string[]                      |\n| excludeCountries   | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`.                        | string[]                      |\n| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`.                                   | string[]                      |\n| onChange           | The only difference from the default `onChange` is that value comes first.                                                    | function(value, event)        |\n| onMount            | The callback is triggered once the component gets mounted.                                                                    | function(value)               |\n\n## Contribute\n\nAny contribution is welcome. Don't hesitate to open an issue or discussion if you have questions about your project's usage and integration. For ideas or suggestions, please open a pull request. Your name will shine on our contributors' list. Be proud of what you build!\n\n## License\n\nCopyright (C) 2023 Artyom Vancyan. [MIT](https://github.com/typesnippet/mui-phone-input/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypesnippet%2Fmui-phone-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftypesnippet%2Fmui-phone-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypesnippet%2Fmui-phone-input/lists"}