https://github.com/omeralpi/shadcn-phone-input

Customizable phone input component with proper validation for any country. Built on top of shadcn.
https://github.com/omeralpi/shadcn-phone-input

phone-number radix-ui react react-phone-number-input shadcn-ui

Last synced: 28 days ago
JSON representation

Customizable phone input component with proper validation for any country. Built on top of shadcn.

• Host: GitHub
• URL: https://github.com/omeralpi/shadcn-phone-input
• Owner: omeralpi
• License: mit
• Created: 2024-02-02T10:20:54.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-02T15:50:35.000Z (about 1 month ago)
• Last Synced: 2024-06-02T17:41:50.179Z (about 1 month ago)
• Topics: phone-number, radix-ui, react, react-phone-number-input, shadcn-ui
• Language: TypeScript
• Homepage: https://shadcn-phone-input.vercel.app
• Size: 221 KB
• Stars: 265
• Watchers: 1
• Forks: 21
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-shadcn-ui - shadcn-phone-input - Customizable phone input component with proper validation for any country. (Libs and Components)

README

        
https://github.com/omeralpi/shadcn-phone-input/assets/19254700/2f32e063-248f-40e3-8c08-041adf3954be

[Shadcn Phone Input](https://shadcn-phone-input.vercel.app/) 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.

## Why

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!

## Usage

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!

```tsx

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>({

    resolver: zodResolver(FormSchema),

    defaultValues: {

      phone: "",

    },

  });

  function onSubmit(data: z.infer) {

    toast({

      title: "You submitted the following values:",

      description: (

        

          {JSON.stringify(data, null, 2)}

        

      ),

    });

  }


  return (

    

      

         (

            

              Phone Number

              

                

              

              

                Enter a phone number

              

              

            

          )}

        />

        Submit

      

    

  );

}

```

## Other Examples

### Optional Phone Input

```tsx

const FormSchema = z.object({

  phone: z

    .string()

    .refine(isValidPhoneNumber, { message: "Invalid phone number" })

    .or(z.literal("")),

});

```

## Documentation

You can find out more about the API and implementation in the

[Documentation](https://shadcn-phone-input.vercel.app/#setup).