{"id":13805568,"url":"https://github.com/typesnippet/antd-phone-input","last_synced_at":"2026-04-07T04:31:58.742Z","repository":{"id":100739659,"uuid":"606501380","full_name":"typesnippet/antd-phone-input","owner":"typesnippet","description":"Advanced, highly customizable phone input component for Ant Design.","archived":false,"fork":false,"pushed_at":"2026-03-17T22:36:22.000Z","size":545,"stargazers_count":90,"open_issues_count":0,"forks_count":17,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-18T12:26:00.422Z","etag":null,"topics":["advanced","ant","ant-design","antd","component","customizable","design","hacktoberfest","input","number","phone","phone-number","react"],"latest_commit_sha":null,"homepage":"https://playground.typesnippet.org/antd-phone-input-5.x/","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-02-25T17:23:35.000Z","updated_at":"2026-03-17T22:20:49.000Z","dependencies_parsed_at":"2023-09-23T06:12:55.800Z","dependency_job_id":"a88e400f-ce84-49ee-85be-13df4a516960","html_url":"https://github.com/typesnippet/antd-phone-input","commit_stats":{"total_commits":295,"total_committers":6,"mean_commits":"49.166666666666664","dds":0.09491525423728808,"last_synced_commit":"b9a34ec523622f53c42ab34344d72460e0cf0507"},"previous_names":["typesnippet/antd-phone-input","artyomvancyan/antd-phone-input"],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/typesnippet/antd-phone-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fantd-phone-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fantd-phone-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fantd-phone-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fantd-phone-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typesnippet","download_url":"https://codeload.github.com/typesnippet/antd-phone-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typesnippet%2Fantd-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","ant","ant-design","antd","component","customizable","design","hacktoberfest","input","number","phone","phone-number","react"],"created_at":"2024-08-04T01:01:02.438Z","updated_at":"2026-04-07T04:31:58.736Z","avatar_url":"https://github.com/typesnippet.png","language":"TypeScript","funding_links":[],"categories":["Components","TypeScript"],"sub_categories":["Themes"],"readme":"# Antd Phone Input \u003cimg src=\"https://github.com/typesnippet.png\" align=\"right\" height=\"64\" /\u003e\n\n[![npm](https://img.shields.io/npm/v/antd-phone-input)](https://www.npmjs.com/package/antd-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/antd-phone-input-5.x)\n[![antd](https://img.shields.io/badge/antd-4.x%20|%205.x%20|%206.x-blue)](https://github.com/ant-design/ant-design)\n[![types](https://img.shields.io/npm/types/antd-phone-input)](https://www.npmjs.com/package/antd-phone-input)\n[![License](https://img.shields.io/npm/l/antd-phone-input)](https://github.com/typesnippet/antd-phone-input/blob/master/LICENSE)\n[![Tests](https://github.com/typesnippet/antd-phone-input/actions/workflows/tests.yml/badge.svg)](https://github.com/typesnippet/antd-phone-input/actions/workflows/tests.yml)\n\n\u003cp\u003eAdvanced phone input component for Material UI that leverages the \u003ca href=\"https://github.com/typesnippet/react-phone-hooks\"\u003ereact-phone-hooks\u003c/a\u003e supporting all countries. The package is compatible with \u003ca href=\"https://github.com/ant-design/ant-design\"\u003eantd\u003c/a\u003e 4, 5 and 6 versions. 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/antd-phone-input-5.x\"\u003e\n \u003cimg src=\"https://github.com/typesnippet/antd-phone-input/assets/44609997/37386477-3ab5-4afb-9c85-88be676e8afe\" alt=\"Antd 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 [here](https://github.com/typesnippet/antd-phone-input/issues/64#issuecomment-1855867861).\n\n```javascript\nimport React from \"react\";\nimport PhoneInput from \"antd-phone-input\";\nimport FormItem from \"antd/es/form/FormItem\";\n\nconst validator = (_, {valid}) =\u003e {\n // if (valid(true)) return Promise.resolve(); // strict validation\n if (valid()) return Promise.resolve(); // non-strict validation\n return Promise.reject(\"Invalid phone number\");\n}\n\nconst Demo = () =\u003e {\n return (\n \u003cFormItem name=\"phone\" rules={[{validator}]}\u003e\n \u003cPhoneInput enableSearch/\u003e\n \u003c/FormItem\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## Props\n\nApart from the phone-specific properties described below, all [Input](https://ant.design/components/input#input) properties supported by the used Ant Design version 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. This also applies to the `initialValue` property of [Form.Item](https://ant.design/components/form#formitem). | [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| 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| dropdownRender | Customize the dropdown menu content. | (menu: ReactNode) =\u003e ReactNode |\n| onChange | The only difference from the original `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](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypesnippet%2Fantd-phone-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftypesnippet%2Fantd-phone-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypesnippet%2Fantd-phone-input/lists"}