V1 - WireUI Docs

# Mask Tokens
# Simple Mask
# Multiple Mask
# Mask Anything
# Create a Custom Input

The maskable input helps us when we need an input pattern, like phone, ID, email and whatever. It's possible to 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

Maskable Input

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

Multiple Mask

Multiple Maskable Input

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 extend the default component.

 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