Back to Forms & Inputs
Phone Input
An international phone number field: a flag + dial-code country picker fused into one pill-shaped control with a number input that auto-formats digits against that country's own mask as you type.
We'll text a verification code to +998 90 123 45 67.
Forms & Inputsphoneinternationalcountry-selectmaskflag
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Overview
Layout
One fused pill: country trigger + divider + number input
Masking
Digits reformatted live per-country (US vs. UZ vs. JP, etc.)
Flags
Derived from ISO 3166-1 alpha-2 via Unicode code points
Focus
A single ring wraps the whole pill, not each half separately