Shadcn Phone Input

Shadcn Phone Input: Advanced Phone Number Component for Next.js & Shadcn UI

This Next.js project provides a user-friendly and formatted phone input component, intended for integration with Shadcn UI (a pull request is planned). Built with Shadcn UI and leveraging libphonenumber-js, it simplifies collecting and validating international phone numbers. It aims for seamless integration for developers adding robust phone input to applications, with country selection and formatting. Country data is sourced from the OSS countries-states-cities-database project API.

Features:

• Formatted Phone Input: Provides a user-friendly input field that automatically formats phone numbers during entry according to country-specific rules.
• Shadcn UI Integration: Seamlessly integrates with applications built using Shadcn UI, matching its design and component structure.
• libphonenumber-js Core: Leverages the comprehensive libphonenumber-js library for robust phone number parsing, validation, and formatting capabilities.
• Dynamic Country Data: Sources country data, including ISO codes and calling codes, from the OSS countries-states-cities-database project API.
• Interactive Country Selector: Features a country selector, often with visual flags, allowing users to easily specify the phone number's origin country.
• Detailed Phone Information (getPhoneData utility): Offers a getPhoneData utility function to retrieve extensive details about the entered number, such as country code, national number, international format, and a tel URI.
• Real-time Validation Feedback: Indicates the validity and possibility of the entered phone number, providing immediate feedback to the user (e.g., 'VALID NUMBER', 'POSSIBLE NUMBER').
• Form-Ready Component: Designed for easy embedding within HTML forms to collect validated phone numbers as part of user data submission.

Summary:

Shadcn Phone Input is a specialized component for Next.js applications, streamlining the process of capturing and validating international phone numbers. It combines the aesthetic of Shadcn UI with the robust functionality of libphonenumber-js, offering features like automatic formatting, country selection, and detailed phone number data retrieval, making it a valuable tool for developers building forms that require phone input.