React Mask Input Overview

The Ignite UI for React Mask Input is an input field that allows the developer to control user input and format the visible value, based on configurable rules. It provides different input options and ease in use and configuration.

React Mask Input Example

Usage

First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrMaskInput, its necessary CSS, and register its module, like so:

import { IgrMaskInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

<IgrMaskInput mask="00000">
    <span slot="prefix">
        <IgrIcon ref={iconLocationRef} name="location" collection="material"></IgrIcon>
    </span>
    <span slot="helper-text">ZIP Code</span>
</IgrMaskInput>

For a complete introduction to the Ignite UI for React, read the Getting Started topic.

Mask Rules

The table bellow shows the supported built-in mask rules:

These flags also participate in the component validation - i.e., the input becomes invalid if some but not all required positions are filled (no positions filled/empty value is still a responsibility of required). This applies to both stand-alone inputs and when included in a form.

Applying Mask

Applying the mask is pretty straightforward. All you need to do is provide a predetermined pattern to the Mask property of the input.

In the example below, we will apply a mask for a phone number with an extension code.

<IgrMaskInput mask="(####) 00-00-00 Ext. 9999">
    <span slot="prefix">
        <IgrIcon ref={iconPhoneRef} name="phone" collection="material"></IgrIcon>
    </span>
    <span slot="helper-text">Phone number</span>
</IgrMaskInput>

After that you should see the following in your browser:

Prompt Character

Developers can customize the prompt symbol used for unfilled parts of the mask. To do this, simply provide any character to the Prompt property:

<IgrMaskInput mask="(####) 00-00-00 Ext. 9999" prompt="-"></IgrMaskInput>

By default, the prompt character is underscore.

Placeholder

Developers can also take advantage of the Placeholder property, which serves the purpose of the native input placeholder attribute. If no value is provided for the placeholder, the value of the mask is used as such.

<IgrMaskInput mask="00/00/0000" placeholder="dd/MM/yyyy"></IgrMaskInput>

Value Modes

The IgrMaskInput exposes a ValueMode property that lets you choose between raw and withFormatting options to configure which input value (formatted or raw) to bind in your form when a specific mask is applied. By default, ValueMode is set to raw. Try it for yourself in the example below:

Styling

The IgrMaskInput component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

igc-mask-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-mask-input::part(input)::placeholder {
  color: var(--ig-primary-100-contrast);
}

Assumptions and limitations

• The masked input does not expose a type attribute since it is always an input of type text.
• Undo/redo behavior is currently unsupported.

API References

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub