Phone Input

Overview

PhoneInput is the shared phone number field for forms that need country-code selection and national number formatting.

It composes:

• a searchable country Select with flag and calling code
• a national number Input with inputMode="tel"

The component manages display formatting internally and commits the serialized phone value on blur via onBlur.

Basic Usage

import { PhoneInput } from '@fsai/shared-ui';

<PhoneInput
  label="Phone number"
  value={phone}
  onBlur={setPhone}
/>

With Error State

<PhoneInput
  label="Mobile"
  value={phone}
  onBlur={setPhone}
  error={errors.phone}
  fullWidth
/>

Props

Value Handling

PhoneInput uses @fsai/sdk phone utilities:

• resolvePhoneForDisplay parses the stored value into country + national number for display
• formatNationalPhoneInput formats the national number as the user types
• serializePhoneForStorage validates and serializes on blur

The field commits on blur, not on every keystroke. This matches typical form validation patterns where the parent owns the stored value.

Local validation errors (such as invalid number format) appear alongside external error props.

Important Conventions

• Use onBlur as the value commit callback, not onChange.
• The country selector is searchable and shows flag, country name, and calling code in the dropdown.
• The country selector column is fixed width (7rem); the number input fills the remaining space.
• Prefer passing already-serialized values from the backend rather than raw national numbers.

Guidelines

• Do use PhoneInput for user-facing phone fields in forms
• Do handle validation errors via the error prop from your form layer
• Do persist the serialized value returned by onBlur
• Don't use a plain Input for phone numbers when country selection matters
• Don't expect live onChange callbacks — the value commits on blur