//
An international phone number input with searchable country selector, auto-formatting, and E.164 parsing.
bun add xiod-ui1import {2 InputPhone,3 InputPhoneCountrySelect,4 InputPhoneFlag,5 InputPhoneInput,6 PhoneInput,7 PhoneInputCountrySelect,8 PhoneInputFlag,9 PhoneInputInput10} from "xiod-ui/input-phone";1<InputPhone>2 <InputPhoneInput />3 <PhoneInput />4 <PhoneInputInput />5 <InputPhoneCountrySelect />6 <InputPhoneFlag />7 <PhoneInputCountrySelect />8 <PhoneInputFlag />9</InputPhone>| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string| undefined | - | |
value | string| undefined | - | |
defaultCountry | string| undefined | US | |
countries | CountryData[]| undefined | [
{
code: "US",
name: "United States",
dialCode: "+1",
flag: "🇺🇸",
mask: "(###) ###-####",
},
{
code: "GB",
name: "United Kingdom",
dialCode: "+44",
flag: "🇬🇧",
mask: "##### ######",
},
{
code: "IN",
name: "India",
dialCode: "+91",
flag: "🇮🇳",
mask: "##### #####",
},
{
code: "CA",
name: "Canada",
dialCode: "+1",
flag: "🇨🇦",
mask: "(###) ###-####",
},
{
code: "AU",
name: "Australia",
dialCode: "+61",
flag: "🇦🇺",
mask: "#### ### ###",
},
{
code: "DE",
name: "Germany",
dialCode: "+49",
flag: "🇩🇪",
mask: "#### ########",
},
{
code: "FR",
name: "France",
dialCode: "+33",
flag: "🇫🇷",
mask: "# ## ## ## ##",
},
{
code: "JP",
name: "Japan",
dialCode: "+81",
flag: "🇯🇵",
mask: "## #### ####",
},
{
code: "BR",
name: "Brazil",
dialCode: "+55",
flag: "🇧🇷",
mask: "(##) #####-####",
},
{
code: "CN",
name: "China",
dialCode: "+86",
flag: "🇨🇳",
mask: "### #### ####",
},
{
code: "ES",
name: "Spain",
dialCode: "+34",
flag: "🇪🇸",
mask: "### ## ## ##",
},
{
code: "IT",
name: "Italy",
dialCode: "+39",
flag: "🇮🇹",
mask: "### #######",
},
{
code: "MX",
name: "Mexico",
dialCode: "+52",
flag: "🇲🇽",
mask: "### ### ####",
},
{
code: "NL",
name: "Netherlands",
dialCode: "+31",
flag: "🇳🇱",
mask: "# ########",
},
{
code: "SG",
name: "Singapore",
dialCode: "+65",
flag: "🇸🇬",
mask: "#### ####",
},
{
code: "KR",
name: "South Korea",
dialCode: "+82",
flag: "🇰🇷",
mask: "## #### ####",
},
{
code: "ZA",
name: "South Africa",
dialCode: "+27",
flag: "🇿🇦",
mask: "## ### ####",
},
{
code: "AE",
name: "United Arab Emirates",
dialCode: "+971",
flag: "🇦🇪",
mask: "## ### ####",
},
{
code: "AR",
name: "Argentina",
dialCode: "+54",
flag: "🇦🇷",
mask: "### ###-####",
},
{
code: "CH",
name: "Switzerland",
dialCode: "+41",
flag: "🇨🇭",
mask: "## ### ## ##",
},
{
code: "SE",
name: "Sweden",
dialCode: "+46",
flag: "🇸🇪",
mask: "##-### ## ##",
},
{
code: "NO",
name: "Norway",
dialCode: "+47",
flag: "🇳🇴",
mask: "### ## ###",
},
{
code: "DK",
name: "Denmark",
dialCode: "+45",
flag: "🇩🇰",
mask: "## ## ## ##",
},
{
code: "FI",
name: "Finland",
dialCode: "+358",
flag: "🇫🇮",
mask: "## ### ## ##",
},
{
code: "NZ",
name: "New Zealand",
dialCode: "+64",
flag: "🇳🇿",
mask: "## ### ####",
},
{
code: "PL",
name: "Poland",
dialCode: "+48",
flag: "🇵🇱",
mask: "### ### ###",
},
{
code: "PT",
name: "Portugal",
dialCode: "+351",
flag: "🇵🇹",
mask: "### ### ###",
},
{
code: "IE",
name: "Ireland",
dialCode: "+353",
flag: "🇮🇪",
mask: "## ### ####",
},
{
code: "BE",
name: "Belgium",
dialCode: "+32",
flag: "🇧🇪",
mask: "### ## ## ##",
},
{
code: "AT",
name: "Austria",
dialCode: "+43",
flag: "🇦🇹",
mask: "#### ######",
},
{
code: "IL",
name: "Israel",
dialCode: "+972",
flag: "🇮🇱",
mask: "##-###-####",
},
{
code: "SA",
name: "Saudi Arabia",
dialCode: "+966",
flag: "🇸🇦",
mask: "## ### ####",
},
{
code: "TH",
name: "Thailand",
dialCode: "+66",
flag: "🇹🇭",
mask: "## #### ####",
},
{
code: "MY",
name: "Malaysia",
dialCode: "+60",
flag: "🇲🇾",
mask: "##-### ####",
},
{
code: "ID",
name: "Indonesia",
dialCode: "+62",
flag: "🇮🇩",
mask: "###-####-####",
},
{
code: "PH",
name: "Philippines",
dialCode: "+63",
flag: "🇵🇭",
mask: "### ### ####",
},
{
code: "VN",
name: "Vietnam",
dialCode: "+84",
flag: "🇻🇳",
mask: "### ### ####",
},
{
code: "GR",
name: "Greece",
dialCode: "+30",
flag: "🇬🇷",
mask: "### #######",
},
{
code: "TR",
name: "Turkey",
dialCode: "+90",
flag: "🇹🇷",
mask: "### ### ## ##",
},
{
code: "UA",
name: "Ukraine",
dialCode: "+380",
flag: "🇺🇦",
mask: "## ### ## ##",
},
{
code: "CZ",
name: "Czech Republic",
dialCode: "+420",
flag: "🇨🇿",
mask: "### ### ###",
},
{
code: "HU",
name: "Hungary",
dialCode: "+36",
flag: "🇭🇺",
mask: "## ### ####",
},
{
code: "RO",
name: "Romania",
dialCode: "+40",
flag: "🇷🇴",
mask: "### ### ###",
},
{
code: "CL",
name: "Chile",
dialCode: "+56",
flag: "🇨🇱",
mask: "# #### ####",
},
{
code: "CO",
name: "Colombia",
dialCode: "+57",
flag: "🇨🇴",
mask: "### ### ####",
},
{
code: "PE",
name: "Peru",
dialCode: "+51",
flag: "🇵🇪",
mask: "### ### ###",
},
{
code: "EG",
name: "Egypt",
dialCode: "+20",
flag: "🇪🇬",
mask: "## #### ####",
},
{
code: "NG",
name: "Nigeria",
dialCode: "+234",
flag: "🇳🇬",
mask: "### ### ####",
},
{
code: "KE",
name: "Kenya",
dialCode: "+254",
flag: "🇰🇪",
mask: "### ######",
},
] | |
disabled | boolean| undefined | - | |
readOnly | boolean| undefined | - | |
onChange | ((e164: string, country: CountryData, nationalNumber: string) => void)| undefined | - | |
size | "default"| "sm"| "lg"| null| undefined | default | |
variant | "default"| "ghost"| "filled"| null| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
code | string| undefined | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| undefined | - | |
style | CSSProperties| undefined | - | |
defaultValue | string| number| readonly string[]| undefined | - | The default value of the input. Use when uncontrolled. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, InputState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
size | number| "default"| "sm"| "lg"| undefined | default | |
onValueChange | ((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Callback fired when the `value` changes. Use when controlled. |
unstyled | boolean| undefined | - | |
nativeInput | boolean| undefined | - |