Masked Text / Regex Input

Components > Editing Data > Masked Text / Regex Input

Use this component to...

Prompt the user for a masked / regex value

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Use the masked input component to prompt the user to enter a value that follows a strict format. This format typically includes two or more regions of characters and/or numbers, separated by a delimiter character such as hyphens, periods, and @ signs.

Valid values for each of these masked text inputs can be represented as a regular expression.

Examples of masked text include…

Type of Input	Example	Possible Regular Expression
Email addresses	john.smith@gmail.com	`/ ^((?!\.)[\w-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$ / gm`
US phone numbers	404-887-2931	`/ ^(1\s?)?(\d{3}\|$\d{3}$)[\s\-]?\d{3}[\s\-]?\d{4}$ / gm`
US ZIP code format	15632+1209	`/ \d{5}(?:-?\d{4})? / i`
Tax identification numbers	526-79-0835	`/ ^((?!666\|000)[0-8][0-9\_]{2}\-(?!00)[0-9\_]{2}\-(?!0000)[0-9\_]{4})*$ / gm`

This masked text editor is empty and unfocused, but its watermark shows the user the rough regex pattern needed to satisfy this input, including placeholders for data and the delimiters that separate each section of data.

This masked text editor is empty, but its watermark shows the user the rough regex pattern needed to satisfy this input

This masked text editor contains keyboard focus. The delimiters stay the same, but the input zones change to underscores. Each underscore is replaced with the user’s input as they enter it.

This masked text editor now contains the user’s input.

Development

Web component development

Component reference

p-inputmask

Module: InputMaskModule - Package: primeng

⚠️ This component requires the use of Angular and will not work in non-Angular applications.

Allows user to edit values that have a particular format

View the p-inputmask reference doc

If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.

Implementation

Start by importing the InputMaskModule from PrimeNG.

Import the module

import { InputMaskModule } from 'primeng/inputmask';

Then insert a p-inputMask component in place of a typical input, supply a mask and add the rui-form-control class. View the different mask options and properties in the PrimeNG documentation. When storing only the value (without the mask characters), set unmask to true.

Masked text HTML

<p-inputMask mask="999-99-9999" id="SSN" name="SSN" formControlName="ssn"
    styleClass="rui-form-control" placeholder="999-99-9999" unmask="true" required="true">
</p-inputMask>

Mobile-friendly masked text experience

You will need to use 2 elements in order to create a mobile-friendly input experience.

When you have an input where the only characters entered are numbers, but you want to display other characters in the mask (SSN, phone number, zip code), the type in p-inputMask will need to be text. This will show the full keyboard on mobile devices instead of the number keypad.

In order to keep the correct keyboard in mobile and display a mask in the desktop view, you will use a p-inputMask with the rui-hidden-mobile-device class for the desktop and tablet experience, and a standard <input> element with the type set to number and the rui-visible-mobile-device class for the mobile experience.

Some types of masked values like telephone numbers and e-mail addresses have HTML5 input types tel and email to display the proper mobile keyboard.

Using input masks in the native HTML input

<input id="Email" formControlName="email" type="email" class="rui-form-control"
    autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />

Validate

Use the Angular “pattern” validator to validate the user’s input as a regular expression value.

Angular component development

Component reference

p-inputmask

Module: InputMaskModule - Package: primeng

Allows user to edit values that have a particular format

View the p-inputmask reference doc

Implementation

Start by importing the InputMaskModule from PrimeNG.

Import the module

import { InputMaskModule } from 'primeng/inputmask';

Then insert a p-inputMask component in place of a typical input, supply a mask and add the form-control class. View the different mask options and properties in the PrimeNG documentation. When storing only the value (without the mask characters), set unmask to true.

Masked text HTML

<p-inputMask mask="999-99-9999" id="SSN" name="SSN" formControlName="ssn"
    styleClass="rui-form-control" placeholder="999-99-9999" unmask="true" required="true">
</p-inputMask>

Mobile-friendly masked text experience

You will need to use 2 elements in order to create a mobile-friendly input experience.

In order to keep the correct keyboard in mobile and display a mask in the desktop view, you will use a p-inputMask with the jha-hidden-mobile-device class for the desktop and tablet experience, and a standard <input> element with the type set to number and the jha-visible-mobile-device class for the mobile experience.

Some types of masked values like telephone numbers and e-mail addresses have HTML5 input types tel and email to display the proper mobile keyboard.

Using input masks in the native HTML input

<input id="Email" formControlName="email" type="email" class="form-control"
    autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />

Validate

Use the Angular “pattern” validator to validate the user’s input as a regular expression value.

Design

Figma design

Figma design info

You can find this component in the Components - Forms page in the Figma UI Kit.

Dev Component	Design Component Name
Masked text input	JHA / Forms / Text Input; set State to “Watermark” if you want to show watermark text instead of user input, otherwise leave State as “Normal”

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Editing Form Data

Dev Component	Design Component Name
Masked text input	JHA / Forms / Text Input Select the “Watermark Text” state in the component if you want to show watermark text instead of user input.

Dev Component

Design Component Name

Masked text input

JHA / Forms / Text Input

Select the “Watermark Text” state in the component if you want to show watermark text instead of user input.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Apr 19 2023