Download the PHP package erlenwald/filament-phone-input without Composer

Filament Phone Input

A Filament form field for entering phone numbers with country selection, masks, country detection, configurable output formats, and optional flag icons.

Features

• Country dropdown with search
• Favorite countries group
• Country-specific phone masks
• Automatic country detection while typing or pasting
• Optional selected country state field
• Configurable phone state path
• Configurable output format
• Optional default country
• Optional IP-based country lookup
• Optional SVG flags
• 1x1 and 4x3 flag aspect modes
• Publishable translations
• Publishable custom CSS
• English and Russian translations
• No dependency on intl-tel-input

Requirements

• PHP 8.2+
• Laravel
• Filament 5

Installation

Install the package via Composer:

Publish the required flag assets:

Publish Filament assets:

Clear the application cache if needed:

Optional publishing

You can publish only the files you need.

Publish everything:

Publish everything and overwrite existing files:

Use --force carefully because it overwrites already published translations and custom CSS.

After publishing or changing custom CSS, run:

Basic usage

By default, the normalized phone number is written to the same state path as the field name:

To also store the selected country ISO2 code:

Submitted state:

Full example

Configuration methods

All standard Filament field methods such as required(), label(), helperText(), disabled(), and hidden() are available because the component extends Filament's Field.

Phone number formats

Use the PhoneNumberFormat enum:

Available formats:

You can also pass a string:

State paths

Default phone state

Submitted state:

Phone and country state

Submitted state:

Custom country state path

Submitted state:

Custom phone state path

Submitted state:

Countries

Restrict visible countries:

Show favorite countries at the top:

Set an initial fallback country:

defaultCountry() does not restrict the list. It is only used as an initial fallback when the field is empty and no country state is available.

Flags

By default, the component displays ISO2 country codes.

Enable flag icons:

Use rectangular flags:

Use square flags:

Flag icons require published flag assets:

The package ships both WebP and SVG flag atlases.

By default, WebP atlases are used because they are much smaller:

If you prefer SVG atlases, publish the custom CSS file:

Then edit:

and override the flag atlas variables:

After changing custom CSS, run:

IP lookup

IP lookup is optional and does not override a value already typed by the user.

The endpoint may return JSON:

Nested keys are supported:

Expected JSON:

Plain text is also supported:

Cloudflare-like trace text is supported too:

Customization

Translations

Publish translations:

Published files:

You can edit these files to override labels, country names, search placeholder, and group names.

Styles

Publish custom CSS:

Published file:

This file is loaded after the package CSS, so you can override component styles and CSS variables there.

After changing the custom CSS, run:

Validation

This package focuses on input formatting and state normalization.

Server-side validation should still be handled by your application according to your own business rules:

Assets

The component uses generated flag atlas files.

WebP atlases are used by default:

SVG atlases are also included and can be enabled through custom CSS:

All flag atlases are published to:

The base JavaScript and CSS assets are registered through Filament:

After package updates, refresh published assets:

If you also want to refresh translations and custom CSS, use:

Be careful: this overwrites customized translation and CSS files.

Credits

Flag assets are based on the flag-icons project.

See NOTICE.md for third-party attribution.

License

The MIT License.

See LICENSE.