Components / Phone Input

Phone Input

Collecting a phone number with a country picker: flag button opens a searchable country list (Command in a Popover), the input formats as you type.

import { PhoneInput } from '@layers/ui/phone-input'

Rendered stock

House rules

  • Controlled: value is an E.164 string from react-phone-number-input; onChange fires with the parsed value. defaultCountry seeds the calling code.
  • The country picker is the stock Command-in-Popover composition; never rebuild it.
  • Imports the full flag bundle; keep PhoneInput off surfaces that never collect phone numbers.