The maskable input component is a versatile and user-friendly element that you can seamlessly integrate into your projects. It allows you to create customized masks with different tokens, offering a wide range of configurations. You can easily craft a personalized component using WireUi's Maskable, defining the getInputMask function to specify the desired mask for the input. This component enables you to apply a variety of masks, enhancing its adaptability and utility in various applications.

 1{
 2    '#': { pattern: /\d/ },
 3    'X': { pattern: /[0-9a-zA-Z]/ },
 4    'S': { pattern: /[a-zA-Z]/ },
 5    'A': { pattern: /[a-zA-Z]/, transform: (v: string): string => v.toLocaleUpperCase() },
 6    'a': { pattern: /[a-zA-Z]/, transform: (v: string): string => v.toLocaleLowerCase() },
 7    'H': { pattern: /([01][0-9])|(2[0-3])/ },
 8    'h': { pattern: /[1-9]|1[0-2]/ },
 9    'm': { pattern: /[0-5][0-9]/ },
10    '!': { escape: true }
11}

The maskable input is both user-friendly and a captivating addition to your project.

1<x-maskable
2    id="simple-mask"
3    label="Maskable Input"
4    mask="(###) ###-####"
5    placeholder="Phone number"
6/>

You can assign various masks to the maskable input component, allowing for multiple configurations.

1<x-maskable
2    id="multiple-mask"
3    label="Multiple Maskable Input"
4    :mask="['(###) ###-####', '+# ### ###-####', '+## ## ####-####']"
5    placeholder="Phone number"
6/>

You can further customize your masks by using distinct tokens for various configurations.

1<x-maskable
2    id="mask-anything"
3    label="Mask Anything"
4    mask="##.SS.A.a-##"
5    placeholder="12.aB.C.d-34"
6/>

Here's an example demonstrating how to create a custom component using WireUi's Maskable. Simply define the getInputMask function, which should return a string specifying the desired mask for the component.

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