Phone Input

E.164-formatted phone entry with country dialing-code picker. Sierra Leone (+232) is the default; the country list ships ~180 entries inline so the field works without a separate fetch. Output is always E.164 (e.g. +23276123456) regardless of how the user enters digits.

Default — Sierra Leone

Empty controlled value defaults to +232. Type-to-filter inside the country picker.

E.164 value: (empty)

Preset diaspora number

Initial value +447911123456 auto-detects United Kingdom. Switch country and the dialing code swaps without losing the digits.

E.164 value: +447911123456

Soft validation hint

Sierra Leone numbers are 8 digits after the dial code. Until the input reaches that length, a soft hint renders inline. Server-side validation is still authoritative.

Sierra Leone numbers are typically 8 digits.

Error state

Pass error after a server-side rejection (already-in-use, invalid format, etc.). Field flips aria-invalid and the border turns destructive.

Disabled

Accessibility

  • Native <input type="tel"> with inputMode="tel" and autoComplete="tel" for mobile keypad + broad autofill compatibility.
  • Country picker exposes role="combobox" via the underlying Combobox.
  • Errors render in role="alert"; the field flips aria-invalid.
  • Soft length hint sits in a stable aria-describedby region so screen readers announce expectations only when relevant.