The phone input component offers a versatile and customizable feature in WireUI. It allows you to assign various masks, giving you multiple options for tailoring the input format to your specific needs. To create a custom phone input component, you can leverage WireUI's Maskable. By defining the getInputMask function, you can specify the desired mask for the component, enabling seamless integration of your chosen input format. Furthermore, for users who prefer a quick and easy setup, the phone input component comes readily equipped with WireUI's default masks, simplifying the process of working with phone input formatting.

You can effortlessly utilize the phone input with WireUI's default masks.

1<x-phone label="Phone" placeholder="Phone" />

We can assign various masks to the phone input component, allowing for multiple customization options.

1<x-phone
2    id="multiple-mask"
3    wire:model="phone"
4    label="Phone"
5    placeholder="Phone"
6    :mask="['(###) ###-####', '+# ### ###-####', '+## ## ####-####']"
7/>

Here, we present an example illustrating the creation of a custom component using WireUi's Maskable. All you need to do is define the getInputMask function, which should return a string containing the desired mask to be applied to the component.

 1namespace App\View\Components;
 2 
 3use WireUi\Components\TextField\Maskable;
 4 
 5class CustomPhone extends Maskable
 6{
 7    protected function getInputMask(): array
 8    {
 9        return ['(##) ####-####', '(##) #####-####'];
10    }
11}