Phone input

Phone number typed as a country-code prefix plus a national-number mask; an old value the mask cannot read is shown editable as-is.

Merged to origin/main 28 September 2026 (acrm MR !4085, "fix(web): telefon jako maska s předvolbou (PhoneInput); vzor telefonu do @acrm/ui"), under the owner's binding rule of 14 Sep 2026 (".claude/rules/design-system.md" §"Vstupy a mobil"): a structured value is a mask, never free text. AD 28 Sep 2026 moved the whole phone pattern into @acrm/ui (source=package): `lib/dial-codes.ts` (pure functions — `DIAL_CODES`, `DIAL_MASKS` per country, `maskNational`, `maskTemplate`, `splitDial`, `phoneDigitsFor`, `phoneComplete`, `searchDialCodes`), `DialCodePicker` (country-code chip + search) and two inputs sharing that mask: `PhoneInput` (this card's primary component — a FORM FIELD, `.acrm-inputwrap.acrm-maskwrap.acrm-phonewrap`) and `MaskedPhoneInput` (the row input of the Multi-value editor, `.phe-*`, no `.acrm-inputwrap` frame of its own). Both were previously app-only (`apps/web/src/components/multivalue/`); `masked-input`'s registry entry called this move out as pending — it is done as of !4085, and this is that promised card. Anatomy: the country code is a prefix inside the field (`DialCodePicker`, chip + search), the national number is masked per country from `DIAL_MASKS` (CZ/SK 3·3·3, DE/AT 3·4·4, fallback 3·3·3 for an unlisted code), with the same visible ghost template pattern as `masked-input` (`.acrm-mask-ghost`, typed part transparent, rest muted underscores). Below 720px `DialCodePicker` renders the canonical `BottomSheet` ("Předvolba" title, grab handle, search, full-width Hotovo, backdrop closes, portais into the modal's own dialog when opened from one) instead of the desktop `Popover` — rule 14 Sep 2026 item 5/6 for every mobile overlay; `useSheetMode()` picks the mode. The selected country is kept even with an empty number (a picked country used to snap back to +420 once the digits were cleared — fixed same MR). Value is the display string "+420 601 123 456" (identical to the app's `formatPhone`), so the stored data format is unchanged. An old value the mask cannot read without loss (several numbers "a; b", letters) is shown as-is via the `legacy` branch and stays editable, never rejected or blanked. `phoneComplete(value)` gates saving — an invalid or incomplete phone never blocks the rest of the form; the host simply does not send it (edit keeps the previous stored value). `aria-describedby` now comes from the enclosing `<Field>`/`<DrawerField>` automatically via `useFieldDescribedBy()` unless the caller passes its own `describedBy` (see `field` sub-entry). Used in: Nová firma (`FirmyPage.tsx`), Nová objednávka (`NewOrderForm.tsx`), Nastavení › Profil ("Telefon" and "Telefon 2", `NastaveniPage.tsx`), and SIM record evidence (`TelefonyPage.tsx`) — there the number is the record's key, so the host saves only a valid number or the unchanged old one, never a half-typed new one.

Used in 7 files · 7 areas · 9× — components/multivalue, components/orders, components/org, pages/NastaveniPage, pages/TelefonyPage, pages/komunikace …

Default

export const Default = () => (
  <div style={col}>
    <Live />
  </div>
);

Variants

export const Variants = () => (
  <div style={col}>
    <Labeled label="PhoneInput — form field (.acrm-inputwrap), e.g. drawer Nová firma">
      <Live initial="+420 601 123 456" />
    </Labeled>
    <Labeled label="MaskedPhoneInput + DialCodePicker — row of the Multi-value editor (.phe-*)">
      <MvRow />
    </Labeled>
  </div>
);

States

export const States = () => (
  <div style={col}>
    <Labeled label="empty — the ghost shows the national template">
      <Live />
    </Labeled>
    <Labeled label="partly typed — incomplete is reported after leaving the field">
      <Live initial="+420 601 12" />
    </Labeled>
    <Labeled label="valid (CZ 9 digits)">
      <Live initial="+420 601 123 456" />
    </Labeled>
    <Labeled label="another country — mask by country (DE 3·4·4)">
      <Live initial="+49 151 1234 5678" />
    </Labeled>
    <Labeled label="old value the mask cannot read (two numbers) — shown as is, can be fixed">
      <Live initial="773032022; 608962617" />
    </Labeled>
  </div>
);

Composition

export const Composition = () => (
  <div style={{ ...col, maxWidth: 520 }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--sp-4)' }}>
      <Live label="Telefon" initial="+420 601 123 456" />
      <Live label="Druhý telefon" />
    </div>
  </div>
);