pnpm add @wandercom/design-system-web

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

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. defaultCountries and parseCountry are re-exported from the phone input module for filtering.

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

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

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

For a flat list of ISO-2 codes, the filterCountries helper does the same filtering in one call. It pairs with the country lists in @wandercom/design-system-shared/countries:

import { STRIPE_CONNECT_COUNTRIES } from '@wandercom/design-system-shared/countries';
import {
  filterCountries,
  PhoneInput,
} from '@wandercom/design-system-web/ui/phone-input';

<PhoneInput countries={filterCountries(STRIPE_CONNECT_COUNTRIES)} />

• Tab moves focus to the phone number input
• Enter or Space on the country button opens the country selector
• ↑ and ↓ navigate countries in the dropdown
• Enter selects the highlighted country and returns focus to the input
• Escape closes the dropdown
• Typing in the search field filters by country name or dial code

• Country selector button has aria-label="Select country", overridable via selectCountryLabel
• Flag images are decorative (alt=""); the country name is announced from the adjacent text in each option
• Country search field has an accessible label, overridable via searchLabel
• Dropdown search supports keyboard-only navigation
• Focus is returned to the phone number input after country selection

Country selector opens a searchable dropdown built on the Base UI Combobox. 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 means the onChange callback always emits the full international number in E.164 format (e.g. +14155550123), suitable for storage and validation.

Dial code displays between the flag and the input, matching the primary text color.

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

• Input for basic text inputs
• Input Group for grouping inputs with addons
• Label for form field labels