Phone
An international phone input with country detection and E.164 output.
Updated
E.164 phone input
const [phone, setPhone] = useState("");
<PhoneInput value={phone} onChange={setPhone} class="w-full max-w-sm" />An international phone input with country detection and E.164 output.
Installation
railbase ui add phone
Note
railbase ui add also copies the button, command, input, popover components — they ship alongside this component automatically.
Usage
import { PhoneInput } from "@/lib/ui/phone.ui";
<PhoneInput value={phone} onValueChange={setPhone} />
// onValueChange gives you the E.164 string; onChange emits an
// event object { target: { value, name } } instead.
// toE164(), isValidE164(), formatNational() helpers are exported
Anatomy
Exported parts: COUNTRIES · isoToFlag · formatNational · detectCountry · toE164 · splitE164 · PhoneInput · isValidE164
Was this page helpful?Thanks for your feedback!