pnpm add @wandercom/design-system-web

import { PhoneInput } from '@wandercom/design-system-web/ui/phone-input';

export function Example() {
  const [phone, setPhone] = useState('');

  return <PhoneInput defaultCountry="us" value={phone} onChange={setPhone} />;
}

Basic phone input with country selector.

Using the sm size variant.

Phone input paired with a label.

Disabled state with a pre-filled value.

Restrict the available countries using the countries prop. Use defaultCountries and parseCountry from react-international-phone to filter.

import { defaultCountries, parseCountry } from 'react-international-phone';

const northAmerica = defaultCountries.filter((c) =>
  ['us', 'ca'].includes(parseCountry(c).iso2)
);

<PhoneInput countries={northAmerica} defaultCountry="us" />

• Tab - Move focus to the phone number input
• Enter / Space on country button - Open country selector
• ↑ / ↓ in dropdown - Navigate countries
• Enter on country - Select and return focus to input
• Escape - Close dropdown
• Type in search field - Filter by country name or dial code

• Country selector button has aria-label="Select country"
• Flag images include country name as alt text
• Dropdown search supports keyboard-only navigation
• Focus is returned to the phone number input after country selection

Country selector opens a searchable popover. Search by country name or dial code (e.g. "+44" or "united").

Preferred countries appear at the top of the dropdown list when specified.

E.164 output — the onChange callback always emits the full international number in E.164 format (e.g. +14155550123), suitable for storage and validation.

Dial code display — shown between the flag and the input, matching the primary text color.

Built on InputGroup — inherits size variants, border states, focus ring, and disabled styling from the design system's InputGroup component.

• Input — Basic text input
• Input Group — Group inputs with addons
• Label — Form field labels