Phone Input

The catnip-input-phone custom element combines a country-code picker with a native telephone text field. It uses the same integrated label, supporting-text, sizing, intent, disabled, and read-only patterns as Input, Number Input, and Dropdown. Shared field behaviour is summarised on Inputs overview.

Overview

• Value (v-model): model-value / .modelValue is { countryCode: string; countryIsoCode: string; phoneNumber: string } | null. countryCode is the dial prefix (for example "+47"); countryIsoCode disambiguates shared prefixes such as "+1".
• Country picker: Opens a searchable list of countries with flag, country name, and dial code. The search row stays sticky while the list scrolls. Filtering matches country name, ISO code, and dial code.
• Default country: Uses modelValue.countryIsoCode first, then default-country-code. The default "auto" infers from browser locale and falls back to NO.
• Local number: The phone-number field shows the selected dial prefix before the editable number. The editable value accepts digits plus a leading + while entering an international prefix; stored local numbers are normalized to digits.
• International numbers: Typing or pasting a +... phone number selects the longest matching country dial code and keeps the remaining digits in the text field.
• Forms: Submitted values serialize as compact JSON, for example {"countryCode":"+47","countryIsoCode":"NO","phoneNumber":"12345678"}. Empty phone numbers submit null.

Live example

Accessibility

• Label: Use the label prop or label slot; for / id wiring points to the telephone input.
• Country picker: The flag button exposes aria-haspopup="listbox", aria-expanded, and active-descendant keyboard navigation.
• Keyboard: The picker supports Arrow Up/Down, Home, End, Enter, Space, and Escape. The search row forwards navigation keys to the list.
• Invalid state: intent="danger" sets aria-invalid="true" on the telephone input; aria-describedby includes supporting text when present.