Masked Input Fields

Your form may contain text fields whose values should have a specific format. To ensure that users enter values correctly, you can add input masks to these form fields. This demo shows how to specify different input mask types. Switch between available JavaScript frameworks to view a dedicated demo version of input masking for jQuery, React, Angular, Vue.js, or Vanilla JavaScript.

You can add input masks to Single-Line Input questions and Multi-Select Matrix questions with cells of the "text" cellType. To configure an input mask, specify the question's maskType and maskSettings properties. Supported mask types are listed in the table below. Each mask type has a corresponding class whose properties you can specify in the maskSettings object.

A numeric input mask allows you to set minimum and maximum limits on a numeric value (the min and max properties), specify value precision if the value is a fractional number, and define symbols to use as a decimalSeparator and a thousandsSeparator:

const surveyJson = {
  "elements": [{
    "name": "number",
    "type": "text",
    "maskType": "numeric",
    "maskSettings": {
      "min": 0,
      "max": 100,
      "precision": 1,
      "decimalSeparator": ",",
      "thousandsSeparator": "."
    }
  }]
}

A currency input mask provides the same capabilities as a numeric input mask, plus it allows you to specify a currencySymbol (for example, "$" or "USD") and a currencyPattern that controls the position of the number, currency symbol, and minus sign.

The currencyPattern property supports the following placeholders:

• # — The formatted number, including decimal and thousands separators. Required exactly once.
• @ — (Optional) The currency symbol.
• - — (Optional) The minus sign for negative values. Omitted for positive values. If this placeholder is absent, the minus sign appears at the beginning of a negative value.

Other characters are displayed as literal text. Digits and control characters are not allowed. For example, the following configuration displays 12.3 as 12.3 USD:

const surveyJson = {
  "elements": [{
    "name": "currency",
    "type": "text",
    "maskType": "currency",
    "maskSettings": {
      "min": 0,
      "max": 100,
      "precision": 1,
      "currencySymbol": "USD",
      "currencyPattern": "# @"
    }
  }]
}

A date and time input mask specifies a pattern for a date time value. This pattern can include separator characters and placeholders that designate date and time components (month, day, year, hours, minutes, seconds). Refer to the pattern property description for a full list of supported placeholders. Optionally, you can limit the date range using the min and max properties:

const surveyJson = {
  "elements": [{
    "name": "date",
    "type": "text",
    "maskType": "datetime",
    "maskSettings": {
      "pattern": "mm/dd/yyyy",
      "min": "2024-03-01",
      "max": "2024-04-01"
    }
  }]
}

A pattern input mask allows you to set a custom value format (phone number, email address, credit card number, etc.). Within the pattern, you can use 9 for a digit, a for a letter, # for a digit or a letter, and \ to escape a character:

const surveyJson = {
  "elements": [{
    "name": "phone",
    "type": "text",
    "maskType": "pattern",
    "maskSettings": {
      "pattern": "+9(999)-999-99-99"
    }
  }]
}

You can also use the maskSettings.patternDefinitions object in global settings to define your own placeholder symbols and map them to custom regular expressions.

Previously described input masks apply to individual editors, but you can also define formats that apply throughout the whole survey.

By default, date-time, numeric, and currency masks use the formats for the survey's locale. To change these formats without changing the survey's language, set regionalFormat.locale. For example, setting it to "de" selects German formats:

const surveyJson = {
  "regionalFormat": {
    "locale": "de"
  },
  "elements": [{
    "name": "date",
    "type": "text",
    "maskType": "datetime"
  }, {
    "name": "currency",
    "type": "text",
    "maskType": "currency"
  }, {
    "name": "number",
    "type": "text",
    "maskType": "numeric"
  }]
}

You can customize the formats with these regionalFormat properties: datePattern, timePattern, decimalSeparator, thousandsSeparator, currencySymbol, and currencyPattern.

For example, the following code places USD after each currency value unless an individual currency mask overrides these settings:

survey.regionalFormat.currencySymbol = "USD";
survey.regionalFormat.currencyPattern = "# @";

In this demo, the region selector changes survey.regionalFormat.locale. The currency field, decimal field, and date-time field without a pattern then update to match the selected region. Other editors with defined patterns keep their individual settings.

If you want to save the question value with an applied input mask, enable the question's saveMaskedValue property within the maskSettings object:

const surveyJson = {
  "elements": [{
    "name": "masked-field",
    "type": "text",
    "maskType": "numeric", // or "currency" | "datetime" | "pattern"
    "maskSettings": {
      // ...
      "saveMaskedValue": true
    }
  }]
}