Components
Phone Input
Icon-leading phone field built on shadcn Input with a default phone icon and shared inputs-internals shell.
Phone Input is a thin wrapper around IconLeadingInput with type="tel" and a default phone icon. Registry item phone-input pulls input and inputs-internals and declares lucide-react.
Installing
pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/phone-input.jsonnpx shadcn@latest add https://ui.isaacfei.com/r/phone-input.jsonyarn dlx shadcn@latest add https://ui.isaacfei.com/r/phone-input.jsonbun x shadcn@latest add https://ui.isaacfei.com/r/phone-input.jsonWith a namespace: npx shadcn@latest add @f-ui/phone-input.
Usage
import { PhoneInput } from '@/components/f-ui/phone-input/phone-input';
<PhoneInput value={phone} onChange={(e) => setPhone(e.target.value)} />Examples
Value:—
"use client";
import { useState } from "react";
import { PhoneInput } from "@/components/f-ui/phone-input/phone-input";
import {
EmptyValuePlaceholder,
isEmptyDisplayValue,
} from "@/components/f-ui/empty-value-placeholder";
export function PhoneInputDemo() {
const [value, setValue] = useState("");
return (
<div className="max-w-sm space-y-3">
<PhoneInput
value={value}
onChange={(e) => setValue(e.target.value)}
aria-label="Phone"
/>
<p className="text-muted-foreground flex flex-wrap items-center gap-x-1 gap-y-0.5 text-xs">
<span>Value:</span>
{isEmptyDisplayValue(value) ? (
<EmptyValuePlaceholder />
) : (
<span className="text-foreground font-medium tabular-nums">{value}</span>
)}
</p>
</div>
);
}API Reference
- Same pattern as Email Input with
type="tel"and a default phone icon. - Default
placeholder:+1 (555) 000-0000.