Multi-format Phone Number Form

Parse country codes directly from what users type or from a quick selector.

Supports typed or selected country codes
Normalizes whitespace automatically
Guards against invalid characters

Why it works?

Combining a country picker with forgiving input parsing means customers can share their number the way they naturally would while you still receive clean, structured data.

Key Benefits

Accepts numbers with or without spaces
Extracts country codes from typed input automatically
Prevents alphabetic or special characters from slipping through

Perfect for

Multi-region signup and onboarding flows.
Support intake or call-back request forms.
Checkout experiences that require a contact number.

See The Parsing In Action

Pick a country or type an international number like +44 7700 900123 to watch the component normalise it.

pnpm dlx shadcn@latest add https://ux.koszyka.com/r/MultiFormatPhoneNumber.json

Quick Start

1. Install the component using the CLI command above.
2. Drop <PhoneNumberForm /> into any form that captures phone numbers.
3. Extend the `countries` list to cover every market you support.

Source Code

Loading code…