Components › Forms & input › Text field › Phone input

Phone input

canon

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 …

@acrm/ui <PhoneInput> <DialCodePicker> <MaskedPhoneInput>.acrm-inputwrap .acrm-maskwrap .acrm-maskwrap.is-error .acrm-phonewrap +12SourceStory
ExamplesCodeUsageAccessibilityChangelog

Import

import { PhoneInput, DialCodePicker, MaskedPhoneInput } from '@acrm/ui'

Props

PhoneInput packages/ui/src/components/PhoneInput.tsx

NameTypeDefaultDescription
value *string—„+420 601 123 456" (prázdné = bez čísla).
onValue *(value: string) => void——
ariaLabelstring——
dialLabelstring'Předvolba'Jméno výběru předvolby pro čtečku.
invalidboolean——
describedBystring—Id textu chyby pod polem.
classNamestring—Šířková varianta obalu (acrm-inputwrap--short …).
onBlur() => void——
autoFocusboolean——
variant'field' | 'formless''field'field (výchozí) = pole formuláře v rámečku .acrm-inputwrap; formless = řádek form-less dialogu (NÁVRH vlna 3 drawer-form, vzor AmountInput formless): bez rámečku, obal .fl-in, předvolba a maska beze změny.

DialCodePicker packages/ui/src/components/DialCodePicker.tsx

NameTypeDefaultDescription
value *string—Aktuální předvolba („+420").
onPick *(code: string) => void——
labelstring——
searchPlaceholderstring'Hledat zemi…'—
emptyTextstring'Nic nenalezeno'—

MaskedPhoneInput packages/ui/src/components/MaskedPhoneInput.tsx

NameTypeDefaultDescription
digits *string—Číslice národního čísla (bez předvolby, bez mezer).
onDigits *(digits: string) => void——
dial *string—Předvolba („+420") — určuje masku.
autoFocusboolean——
ariaLabelstring——
onEnter() => void——
onEscape() => void——
onBlur() => void——

CSS classes

.acrm-inputwrap.acrm-maskwrap.acrm-maskwrap.is-error.acrm-phonewrap.acrm-mask.acrm-mask-ghost.phe-ccbox.phe-cc.phe-ccsheet.phe-ccsearch.phe-cclist.phe-ccrow.phe-ccempty.phe-maskwrap.phe-num.phe-ghost

Files

Masked inputInputField