Phone Input

1import { PhoneInput } from '@/ui/Input'23<Field label="Mobile number" description="We only use this for delivery updates.">4  <PhoneInput5    value={phone}                   // ALWAYS E.164: "+447400123456"6    onChange={setPhone}7    defaultCountry={user.country ?? geo.country ?? 'US'}8  />9</Field>1011// Display and storage are different strings. Only one of them is dialable.12function toDisplay(e164: string, country: Country) {13  const national = e164.slice(country.dial.length)14  return applyMask(national, country.format)15}1617// Paste is the case that decides whether the field feels good. Detect the18// dial code, switch the country, strip separators, keep going.19function onPaste(e: React.ClipboardEvent) {20  const text = e.clipboardData.getData('text')21  e.preventDefault()22  const match = COUNTRIES.find((c) => text.replace(/\s/g, '').startsWith(c.dial))23  if (match) setCountry(match)24  setDigits(text.replace(/\D/g, ''))25}2627// Validate with a maintained library, never a hand-written regex. National28// numbering plans are large, inconsistent, and revised more often than any29// regex in your codebase.30import { parsePhoneNumber } from 'libphonenumber-js'31const parsed = parsePhoneNumber(raw, country.iso)32const valid = parsed?.isValid() ?? false33const e164 = parsed?.format('E.164')

<div class="ds-field">
  <label for="phone">Mobile number</label>
  <p id="phone-hint">For example, 7400 123456</p>

  <div class="ds-phone">
    <!-- A flag has no accessible name. The label carries both parts. -->
    <button
      type="button"
      class="ds-phone__country"
      aria-label="Country code: United Kingdom +44"
      aria-haspopup="listbox"
      aria-expanded="false"
      autocomplete="tel-country-code"
    >
      <span aria-hidden="true">🇬🇧</span>
      <span>+44</span>
      <svg aria-hidden="true">…</svg>
    </button>

    <span class="ds-phone__seam" aria-hidden="true"></span>

    <!-- tel, never number: number strips the leading zero. -->
    <input
      id="phone"
      type="tel"
      inputmode="tel"
      autocomplete="tel-national"
      aria-describedby="phone-hint"
      placeholder="7400 123456"
    />
  </div>

  <!-- What actually gets submitted. -->
  <input type="hidden" name="phone" value="+447400123456" />
</div>

.ds-phone {
  display: flex;
  align-items: stretch;
  block-size: 36px;
  border: 1px solid var(--ds-border-interactive);
  border-radius: var(--radius-md);
  background: var(--ds-surface-inset);
}

/* One value, one field, one ring. Two rings reads as two questions. */
.ds-phone:focus-within {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-accent-subtle);
}

.ds-phone__country {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-inline-size: 5rem;             /* fits +XXX plus a flag and a chevron */
  padding-inline: 10px 8px;
  font-variant-numeric: tabular-nums;
}

/* Inset so it reads as a seam between two targets, not as a border. */
.ds-phone__seam {
  inline-size: 1px;
  margin-block: 6px;
  background: var(--ds-border-subtle);
}

.ds-phone input {
  flex: 1;
  min-inline-size: 0;
  padding-inline: 10px;
  border: 0;
  background: none;
  /* Groups stay aligned as digits are typed and deleted. */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ds-phone input::placeholder { font-family: var(--font-sans); }

@media (pointer: coarse) {
  .ds-phone { block-size: 44px; }
  /* A floating list of 200 countries under an on-screen keyboard is
     unusable — go full-screen with a search field. */
  .ds-phone__list { position: fixed; inset: 0; }
}