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" />