The Ignite UI for Web Components 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.
<!DOCTYPE html><html><head><title>Mask Input Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-mask-inputid="mask-input"mask="00000"><igc-iconname="location"slot="prefix"></igc-icon><spanslot="helper-text">ZIP Code</span></igc-mask-input></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Usage
First, you need to install the Ignite UI for Web Components by running the following command:
For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.
Mask Rules
The table bellow shows the supported built-in mask rules:
Mask Character
Description
0
Digit character [0-9]. Entry is required.
9
Digit character [0-9]. Entry is optional.
#
Digit character [0-9], plus (+), or minus (-) sign. Entry is required.
L
Letter character. Entry is required.
?
Letter character. Entry is optional.
A
Alphanumeric (letter or digit) character. Entry is required.
a
Alphanumeric (letter or digit) character. Entry is optional.
&
Any keyboard character. Entry is required.
C
Any keyboard character. Entry is optional.
\
Escapes a mask flag and turns it into a literal.
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.
<!DOCTYPE html><html><head><title>Mask Input Applying Mask</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-mask-inputid="mask-input"mask="(####) 00-00-00 Ext. 9999"><igc-iconname="phone"slot="prefix"></igc-icon><spanslot="helper-text">Phone number</span></igc-mask-input></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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:
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.
The IgcMaskInputComponent 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:
<!DOCTYPE html><html><head><title>Mask Input Value Modes</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-mask-inputid="mask-input"><igc-iconname="file"slot="prefix"></igc-icon></igc-mask-input><divid="content"style="width: 100%; height: inherit;"><igc-radio-groupid="radio-group"alignment="horizontal"style="margin-bottom: 10px;"><igc-radioname="position"value="raw"label-position="after"checked>raw</igc-radio><igc-radioname="position"value="withFormatting"label-position="after">withFormatting</igc-radio></igc-radio-group><spanid="value-span">Value:</span></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Styling
The IgcMaskInputComponent component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:
Name
Description
container
The main wrapper that holds all main input elements.