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

API

Attributes

Name	Description	Type	Default
`Value`	Input value.	`string`	`null`
`ValueChanged`	Occurs after the value has changed.	`EventCallback<string>`
`Mask`	The mask to use for the input.	`string`	`null`
`MaskPlaceholder`	The placeholder that will be used for the mask.	`string`	`null`
`Plaintext`	Remove the default form field styling and preserve the correct margin and padding.	`bool`	`false`
`ReadOnly`	Prevents modification of the input’s value.	`bool`	`false`
`Disabled`	Prevents user interactions and make it appear lighter.	`bool`	`false`
`Placeholder`	Sets the placeholder for the empty text.	`string`	`null`
`Pattern`	Specifies a regular expression that the input element’s value is checked against on form validation.	`string`	`null`
`Color`	Component visual or contextual style variants.	`Color`	`Default`
`Size`	Component size variations.	`Size`	`Default`
`Autofocus`	Set’s the focus to the component after the rendering is done.	`bool`	`false`
`ShowMaskOnFocus`	Shows the mask when the input gets focus.	`bool`	`true`
`ShowMaskOnHover`	Shows the mask when hovering the mouse.	`bool`	`true`
`NumericInput`	Numeric input direction. Keeps the caret at the end.	`bool`	`false`
`RightAlign`	Align the input to the right. By setting the rightAlign you can specify to right-align an inputmask. This is only applied in combination op the numericInput option or the dir-attribute. The default is true.	`bool`	`false`
`DecimalSeparator`	Define the decimal separator (numeric mode only).	`string`
`GroupSeparator`	Define the group separator (numeric mode only).	`string`
`Nullable`	Return nothing when the user hasn't entered anything.	`bool`	`false`
`AutoUnmask`	Automatically unmask the value when retrieved.	`bool`	`false`
`PositionCaretOnClick`	Defines the positioning of the caret on click.	`InputMaskCaretPosition`	`LastValidPosition`
`ClearMaskOnLostFocus`	Remove the empty mask on blur or when not empty remove the optional trailing part.	`bool`	`true`
`ClearIncomplete`	Clear the incomplete input on blur.	`bool`	`false`
`Completed`	Execute a function when the mask is completed.	`EventCallback<string>`
`Incompleted`	Execute a function when the mask is incomplete. Executes on blur.	`EventCallback<string>`
`Cleared`	Execute a function when the mask is cleared.	`EventCallback`
`Alias`	With an alias, you can define a complex mask definition and call it by using an alias name. So this is mainly to simplify the use of your masks. Some aliases found in the extensions are email, currency, decimal, integer, date, DateTime, dd/mm/yyyy, etc.	`string`
`InputFormat`	Defines the input format when the `Alias` is used.	`string`
`OutputFormat`	Defines the output format of the `Value` when the `Alias` is used.	`string`