Blazorise InputMask component

Input mask allows the user to input a value in a specific format while typing.

The <InputMask> helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...

9: numeric
a: alphabetical
*: alphanumeric

Examples

Basic Mask

To start you only need to define the Mask parameter.

<InputMask Mask="99-9999999" />

With Alias

Instead of masking an input element, it is also possible to use the inputmask for formatting given values.

<InputMask Alias="datetime" InputFormat="dd/mm/yyyy" OutputFormat="ddmmyyyy" />

Other examples

With Placeholder

You can control the placeholder that will be used for the mask. The Placeholder will be used when the mask is not defined. And the MaskPlaceholder will be used when the mask is defined for extra information to the user about the valid input format.

<InputMask Mask="99-9999999" MaskPlaceholder="X" Placeholder="Please enter a valid ID" />

Best Practices

Guide and Validate

A mask helps users enter a known format but does not prove that the value is valid. Show an example or persistent help message before entry, then apply the same business validation used for unmasked input.

Keep Editing Natural

Test typing, pasting, deleting, autofill, and mobile keyboards so the mask does not make valid input harder to enter. Store a normalized value when presentation characters such as spaces or dashes are not part of the underlying data.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<InputMask />