Phone inputforms

Country calling code picker with search by localized name, English name, dial code and ISO, plus a national number field that yields an E.164 number.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/phone-input

의존 아이템combobox input locale style

Default

E.164: none

phone-input-demo.tsx

"use client";
import * as React from "react";import { PhoneInput, type PhoneValue } from "@/components/ui/phone-input";
export default function PhoneInputDemo() {  const [value, setValue] = React.useState<PhoneValue>({ country: "US", number: "" });  const [e164, setE164] = React.useState<string | null>(null);  return (    <div className="flex w-80 flex-col gap-2">      <PhoneInput        name="phone"        value={value}        onValueChange={(next, normalized) => {          setValue(next);          setE164(normalized);        }}      />      <p className="text-sm text-muted-foreground">E.164: {e164 ?? "none"}</p>    </div>  );}