Screen.Recording.2024-02-03.at.17.44.30.mov
Shadcn Phone Input is a phone input component built as part of the Shadcn design system. It offers a blend of customization and out-of-the-box styling, adhering to Shadcn's sleek and modern design principles.
I needed a phone input component for a project. I looked around for any phone input components that used Shadcn's design system, but I couldn't find any. So, I decided to make one myself. I hope you find it useful!
This component is designed to handle phone inputs in your application. It includes the option to select a country along with the phone input.
Warning
Before you dive in, just double-check that you're using version 0.2.1 of the cmdk package!
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { PhoneInput } from "@/components/ui/phone-input";
import { toast } from "@/components/ui/use-toast";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { isValidPhoneNumber } from "react-phone-number-input";
import { z } from "zod";
const FormSchema = z.object({
phone: z
.string()
.refine(isValidPhoneNumber, { message: "Invalid phone number" }),
});
export default function Hero() {
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
phone: "",
},
});
function onSubmit(data: z.infer<typeof FormSchema>) {
toast({
title: "You submitted the following values:",
description: (
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
</pre>
),
});
}
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 flex flex-col items-start">
<FormField
control={form.control}
name="phone"
render={({ field }) => (
<FormItem className="flex flex-col items-start">
<FormLabel className="text-left">Phone Number</FormLabel>
<FormControl className="w-full">
<PhoneInput placeholder="Enter a phone number" {...field} />
</FormControl>
<FormDescription className="text-left">
Enter a phone number
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
);
}const FormSchema = z.object({
phone: z
.string()
.refine(isValidPhoneNumber, { message: "Invalid phone number" })
.or(z.literal("")),
});You can find out more about the API and implementation in the Documentation.