Filament Phone Input screenshot

Filament Phone Input

Author Avatar Theme by Ysfkaya
Updated: 30 Jun 2025
244 Stars

A phone input component that uses intl-tel-input for Laravel Filament

Categories

Overview:

The Filament Phone Input component for Laravel Filament offers an intuitive solution for handling phone input fields in web applications. This package incorporates the International Telephone Input functionality, providing users with a dropdown menu that features various countries and their corresponding flags. Designed to simplify the phone input process, it ensures that both the country and phone number can be managed effectively with just a few key methods from the renowned Laravel Phone package.

This versatile tool is ideal for developers looking to enhance user experience while maintaining clean, organized data storage. By supporting features like validation and customizable formatting options, the Filament Phone Input package stands out as a reliable choice for any Laravel-based project.

Features:

  • Separate Country Code: Store country codes and phone numbers in distinct database columns using the countryStatePath method, promoting better data organization.
  • Default Country Setting: Define a default country to prevent validation errors, particularly useful for previously recorded phone numbers without area codes.
  • Flexible Validation: Utilize the validateFor method to ensure phone numbers meet desired criteria, improving data accuracy.
  • Custom Display Formats: Choose how phone numbers are displayed using the displayNumberFormat method, with options for various formats like E164, NATIONAL, and more.
  • Input Value Type: Control how phone numbers are saved to the database by using the inputNumberFormat method, allowing for consistent data handling.
  • Toggle Dropdown Visibility: Easily disable the country dropdown with the disallowDropdown method for a cleaner interface.
  • Fullscreen Popup for Mobile: Enhance mobile user interaction by enabling a fullscreen popup with the useFullscreenPopup method.
  • Initial Country Configuration: Set the initial country displayed in the dropdown for a more localized user experience.