WireUI
Maskable Inputs

The maskable input help us when need input pattern, like phone, ID, email and whatever. It's possible make any pattern. See possible tokens. Mask everything!

Mask Tokens

Know the Tokens

  • Token # is Numeric
  • Token X is Alphanumeric
  • Token S is Alpha
  • Token A is Alpha forcing UPPERCASE
  • Token a is Alpha forcing lowercase
  • Token H is 24 hours pattern
  • Token h is 12 hours pattern
  • Token m is minutes pattern
  • Token ! is Escape
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}
Simple Mask
1<x-inputs.maskable
2 label="Maskable Input"
3 mask="(###) ###-####"
4 placeholder="Phone number"
5/>
Multiple Mask
1<x-inputs.maskable
2 label="Maskable Input"
3 mask="['(###) ###-####', '+# ### ###-####', '+## ## ####-####']"
4 placeholder="Phone number"
5/>
Mask Anything
1<x-inputs.maskable
2 label="Mask Anything"
3 mask="##.SS.A.a-##"
4 placeholder="12.aB.C.d-34"
5/>
Create a Custom Input

You can create a new input component, just extends default component. Follow example.

1<?php
2 
3namespace App\View\Components;
4 
5use WireUi\View\Components\Inputs\BaseMaskable;
6 
7class CustomMaskableInput extends BaseMaskable
8{
9 protected function getInputMask(): string
10 {
11 return "['(##) ####-####', '(##) #####-####']";
12 }
13}
Input Options

The maskable input accepts all input options and slots

Options

Prop Required Default Type
mask true none string
emitFormatted false false boolean