Shadcn Phone Input Svelte

Shadcn Phone Input Svelte (Moved to shadcn-svelte-extras)

This Svelte component, originally shadcn-phone-input-svelte, is a port of the popular shadcn-phone-input, providing a Shadcn UI styled international phone number input. It leverages svelte-tel-input for robust functionality. Important: This component is now maintained in the shadcn-svelte-extras repository. Developers can integrate this for features like country selection and number validation, ensuring a consistent UI in Svelte projects.

Features:

• Country Selector: Integrated popover with a searchable country list and corresponding flag display.
• International Number Handling: Utilizes svelte-tel-input for robust phone number parsing, validation, and formatting.
• Shadcn UI Integration: Styled to seamlessly blend with Shadcn UI projects, using utility functions for class name construction.
• Customizable Country Order: Allows developers to define a custom sort order for countries in the selection dropdown.
• Two-Way Data Binding: Supports reactive binding for properties like value (E.164 format), selected country (ISO2 code), input valid status, and detailedValue.
• Configurable Input Appearance: Offers props for customizing placeholder text, setting readonly and disabled states, and applying custom CSS via the class prop.
• Detailed Value Output: Provides a detailedValue object containing comprehensive information like country code, dial code, and various number formats.
• Programmatic Focus Control: Exposes a focus() method, enabling developers to programmatically set focus to the input field.
• Advanced TelInput Options: Supports passing TelInputOptions from svelte-tel-input for fine-grained control over input behavior, such as number spacing, auto-placeholder generation, and formatting preferences.
• Modular Component Structure: Built with distinct Svelte components for the main phone input, country selector, and flag display for better maintainability.

Summary:

shadcn-phone-input-svelte offers a Svelte solution for international phone inputs with Shadcn UI aesthetics, based on svelte-tel-input. It includes country selection, validation, and formatting capabilities. Note that this component has been moved and is now part of the shadcn-svelte-extras project for future updates and maintenance. It simplifies adding a polished and user-friendly phone input field to Svelte applications.