opinion
PhoneInput
A country-code select paired with a phone-number field that formats itself for the chosen country.
Phone numberPick a country, and the number field takes its format
In context
Crew contactAdding a crew member to the interview list
Add crew contactCrew interviews
Name
Mobile
Harbour office, interviewed 8 Oct
Props
| Prop | Type | Required | Default |
|---|---|---|---|
value | string | undefined | No | — |
defaultValue | string | undefined | No | — |
onValueChange | ((value: string) => void) | undefined | No | — |
countries | PhoneCountry[] | undefined | No | [ { code: "US", dialCode: "+1", name: "United States", mask: "(999) 999-9999" }, { code: "CA", dialCode: "+1", name: "Canada", mask: "(999) 999-9999" }, { code: "GB", dialCode: "+44", name: "United Kingdom", mask: "9999 999999" }, { code: "AU", dialCode: "+61", name: "Australia", mask: "9999 999 999" }, { code: "DE", dialCode: "+49", name: "Germany" }, { code: "FR", dialCode: "+33", name: "France", mask: "9 99 99 99 99" }, { code: "IN", dialCode: "+91", name: "India", mask: "99999 99999" }, { code: "JP", dialCode: "+81", name: "Japan", mask: "99-9999-9999" }, { code: "BR", dialCode: "+55", name: "Brazil", mask: "(99) 99999-9999" }, { code: "NZ", dialCode: "+64", name: "New Zealand" }, ] |
defaultCountryCode | string | undefined | No | — |
placeholder | string | undefined | No | — |
aria-label | string | undefined | No | Phone number |
disabled | boolean | undefined | No | — |
className | string | undefined | No | — |
data-rebar-* attributes
data-rebar-component="phone-input" on the root; parts: country, national.
Migrating to Ant Design
Not codemod-covered — AntD ships no dedicated international phone input; a migration typically composes AntD's own Select + Input to the same shape.