Phone Input

Pro

Phone number field with a country flag and dial code that opens a country picker. The number formats as you type, and a check appears once it’s complete.

Preview

Installation

npx @lumioui/cli add pro/phone-input

Usage

import { maxDigitsFor, formatPhoneNumber, phoneInfo, PhoneInput } from "@/components/ui/phone-input/phone-input";
<PhoneInput />

Also exported: maxDigitsFor, formatPhoneNumber, phoneInfo.

Examples

Contact form

The Contacts "New contact" sheet.

Recovery number

Security settings in a team workspace app: add a recovery number for two-step sign-in.

Sign-up

A grocery-delivery app's first screen.

API reference

Prop Type Default
value string

Controlled national digits (no dial code, no formatting).

 —
defaultValue string

Uncontrolled initial national digits.

 ""
onValueChange
(digits: string, info: PhoneNumberInfo) … (digits: string, info: PhoneNumberInfo) => void

Fires with the new digits and the full parsed record.

 —
country string

Controlled ISO country code.

 —
defaultCountry string

Uncontrolled initial ISO country code. Default "US".

 "US"
onCountryChange (code: string, country: Country) => void

Fires when the country changes (sheet pick or pasted + number).

 —
countries Country[]

Country data for the picker and dial-code parsing.

 COUNTRIES
suggested string[]

ISO codes pinned at the top of the picker sheet.

 —
label string

Label above the field. In the inline variant it sits on the left.

 —
helper string

Helper text below the field.

 —
error string

Error message — red border, one flicker, announced politely.

 —
showValidState boolean

When the number is complete: draw a check, light the border in the accent and pass one sheen across the field. Default true.

 true
showSlots boolean

Show the unfilled mask as dim digit slots that fill as you type. Default true; off when a custom placeholder is passed.

 —
placeholder string

Placeholder — defaults to the country's mask filled with zeros.

 —
variant "field" | "inline"

"field" bordered input (default) or "inline" borderless row for a grouped form list (Contacts).

 "field"
size "md" | "lg"

Height — md 48 (forms), lg 56 (sign-up hero).

 "md"
disabled boolean

Disable typing and the country button.

 —
className string

Classes for the outer wrapper.

 —