Input Phone

A cross-platform React phone number input component with integrated country selector. Features a searchable country dropdown with flags and dial codes.

Installation

npm install @xsolla/xui-input-phone
# or
yarn add @xsolla/xui-input-phone

Demo

Basic Phone Input

import * as React from 'react';
import { InputPhone } from '@xsolla/xui-input-phone';

export default function BasicPhoneInput() {
  const [phone, setPhone] = React.useState('');

  return (
    <InputPhone
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      placeholder="+1 (000) 000-0000"
    />
  );
}

With Country Selection

import * as React from 'react';
import { InputPhone, Country } from '@xsolla/xui-input-phone';

export default function CountryPhoneInput() {
  const [phone, setPhone] = React.useState('');
  const [country, setCountry] = React.useState<Country | undefined>();

  return (
    <InputPhone
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      selectedCountry={country}
      onCountryChange={setCountry}
    />
  );
}

With Validation

import * as React from 'react';
import { InputPhone } from '@xsolla/xui-input-phone';

export default function ValidatedPhoneInput() {
  const [phone, setPhone] = React.useState('');
  const isValid = phone.length >= 10;

  return (
    <InputPhone
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      checked={isValid}
      extraClear={true}
      onRemove={() => setPhone('')}
    />
  );
}

Anatomy

import { InputPhone } from '@xsolla/xui-input-phone';

<InputPhone
  value={phoneNumber}            // Phone number value
  onChange={handleChange}        // Change event handler
  selectedCountry={country}      // Currently selected country
  onCountryChange={setCountry}   // Country selection handler
  countries={customCountries}    // Custom countries array
  placeholder="+1 (000) 000-0000" // Placeholder text
  size="md"                       // Size variant
  disabled={false}               // Disabled state
  error={false}                  // Error state
  errorMessage="Error"           // Error message
  extraClear={false}             // Show clear button
  onRemove={handleClear}         // Clear button handler
  checked={false}                // Show validation checkmark
/>

Examples

Error State

import * as React from 'react';
import { InputPhone } from '@xsolla/xui-input-phone';

export default function ErrorPhoneInput() {
  return (
    <InputPhone
      value="123"
      error={true}
      errorMessage="Please enter a valid phone number"
    />
  );
}

Phone Input Sizes

import * as React from 'react';
import { InputPhone } from '@xsolla/xui-input-phone';

export default function PhoneInputSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <InputPhone size="xs" placeholder="Extra Small" />
      <InputPhone size="sm" placeholder="Small" />
      <InputPhone size="md" placeholder="Medium" />
      <InputPhone size="lg" placeholder="Large" />
      <InputPhone size="xl" placeholder="Extra Large" />
    </div>
  );
}

Custom Countries

import * as React from 'react';
import { InputPhone, Country } from '@xsolla/xui-input-phone';

export default function CustomCountriesPhone() {
  const [phone, setPhone] = React.useState('');

  const countries: Country[] = [
    { code: 'US', name: 'United States', dialCode: '+1' },
    { code: 'GB', name: 'United Kingdom', dialCode: '+44' },
    { code: 'DE', name: 'Germany', dialCode: '+49' },
  ];

  return (
    <InputPhone
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      countries={countries}
    />
  );
}

API Reference

InputPhone

InputPhone Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | value | string | - | Phone number value. | | onChange | (e: ChangeEvent) => void | - | Change event handler. | | onChangeText | (text: string) => void | - | Text change handler. | | countries | Country[] | All countries | Available countries for selection. | | selectedCountry | Country | - | Currently selected country. | | onCountryChange | (country: Country) => void | - | Country selection handler. | | placeholder | string | "+1 (000) 000-0000" | Placeholder text. | | size | "xl" \| "lg" \| "md" \| "sm" \| "xs" | "md" | Component size. | | disabled | boolean | false | Disabled state. | | error | boolean | false | Error state. | | errorMessage | string | - | Error message text. | | extraClear | boolean | false | Show clear button. | | onRemove | () => void | - | Clear button handler. | | checked | boolean | false | Show validation checkmark. | | checkedIcon | ReactNode | Check icon | Custom checkmark icon. | | testID | string | - | Test identifier. |

Country Interface:

interface Country {
  code: string;      // ISO 3166-1 alpha-2 (e.g., "US")
  name: string;      // Country name
  dialCode: string;  // International dial code (e.g., "+1")
  flag?: ReactNode;  // Optional flag icon
}

Keyboard Navigation

| Key | Action | | :-- | :----- | | Arrow Down | Open dropdown / Next country | | Arrow Up | Previous country | | Enter | Select country / Open dropdown | | Escape | Close dropdown |

Accessibility

• Country selector uses role="combobox"
• Country list uses role="listbox" with role="option" items
• Searchable dropdown with aria-controls linking
• Phone input uses type="tel" and inputMode="tel"