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

Basic Example

To start you only need to define the Mask parameter. 
<InputMask Mask="99-9999999" />

Default masking definitions

Alias Example

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

API

Attributes

Name Description Type Default
Value Input value. string null
ValueChanged Occurs after the value has changed. EventCallback<string>
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
On this page