A phone input with a searchable country picker and a per-country mask whose remaining digits show as faint ghost characters. Pasting a number that starts with a dial code switches the country on its own.
Turn on two-step sign in
A code arrives each time you sign in.
npx shadcn@latest add https://hyperblur.dev/r/field-phone-country.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/field-phone-country.tsx.
import { FieldPhoneCountry } from "@/components/hyperblur/field-phone-country"
<FieldPhoneCountry defaultCountry="GB" onChange={(v) => v.complete && save(v.e164)} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Phone number" | Label above the field. |
| accent | string | "#2f7bff" | Focus ring and caret color. |
| countries | FieldPhoneCountryOption[] | 12 countries | Countries with code, name, dial, mask (# for a digit) and three flag colors. |
| defaultCountry | string | "US" | Two-letter code of the starting country. |
| defaultValue | string | "" | Initial national number. Non-digits are ignored. |
| hint | string | "We'll text a code to confirm it." | Helper text shown until the number is complete. |
| disabled | boolean | false | Disables the picker and the input. |
| onChange | (value: FieldPhoneCountryValue) => void | Called with country, dial, national digits, the E.164 string and complete. |