Input Mask Component

The Input Mask component forces users to enter data in a predefined template format. This is extremely useful for telephone numbers, dates, credit cards, or key codes.

Dynamic Dutch Phone (+31 (0)6-________ or +31 (0)40-_______) Supports mobile (+31 (0)6-12345678), 2-digit area codes (+31 (0)40-1234567) and 3-digit area codes (+31 (0)492-123456).

Date (DD/MM/YYYY)

Credit Card (**** **** **** ****)

<!-- Dynamic Dutch Phone Mask -->
<input type="text" data-role="input-mask" data-mask-type="dutch-phone">

<!-- Date Mask with customized placeholders -->
<input type="text" data-role="input-mask" data-mask="DD/MM/YYYY" data-mask-placeholder="DMY" data-mask-pattern="\d">

<!-- Credit Card Mask -->
<input type="text" data-role="input-mask" data-mask="**** **** **** ****" data-mask-placeholder="*" data-mask-pattern="\d">

Parameters

Parameter	Type	Default	Description
data-mask-type	string	null	Use "dutch-phone" to trigger the dynamic Dutch phone formatting and layout engine.
data-mask	string	null	The pattern template to use for standard input masking. Required if data-mask-type is not set.
data-mask-pattern	string	"."	Regular expression specifying which characters are acceptable in empty placeholders.
data-mask-placeholder	string	"_"	Character(s) representing editable slots inside the template mask.