Shadcn Phone Input

Integrate Seamless Phone Input with Shadcn UI

Effortlessly add a sophisticated phone number input field to your React applications built with Shadcn UI. This component provides a polished user experience with integrated country selection, flags, and real-time validation. It's designed for easy implementation, leveraging the power of react-phone-number-input while adhering to Shadcn's modern design principles, ensuring both functionality and aesthetic consistency in your forms.

Features:

• Integrated Country Selector: Allows users to easily select their country from a searchable dropdown, complete with visual flags.
• Robust Phone Number Validation: Leverages react-phone-number-input for accurate validation of international phone numbers.
• Shadcn UI Native Look and Feel: Built using core Shadcn UI components (Input, Button, Command, Popover, ScrollArea) for seamless design integration.
• React Hook Form & Zod Compatibility: Includes examples for straightforward integration with React Hook Form and Zod for schema-based validation.
• Optional Field Configuration: Supports making the phone input optional within your forms.
• Customizable Component Structure: Offers InputComponent and CountrySelect for potential styling or behavior adjustments.
• TypeScript Support: Comes with type definitions for a better development workflow.
• International Formatting: Automatically handles and displays numbers in common international formats.
• Theme-Aware: Adapts to your Shadcn UI theme, including dark and light modes.
• Clear Usage Examples: Provides code snippets for quick setup and common use cases like optional inputs.

Summary:

Shadcn Phone Input simplifies adding international phone number fields to React projects using Shadcn UI. It offers a feature-rich experience with country selection, validation, and a design consistent with the Shadcn ecosystem. Developers can quickly integrate this component, benefiting from its customizability and compatibility with popular form handling libraries, to enhance user input forms with a reliable and well-styled phone input solution.