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";
<PhoneInput value={phone} onChange={setPhone} />
// toE164(), isValidE164(), formatNational() helpers are exported
Anatomy
Exported parts: COUNTRIES · isoToFlag · formatNational · detectCountry · toE164 · splitE164 · PhoneInput · isValidE164