Text Field

A Text Field can be used for short and general text input. There are options to define input masks and validations, allowing users to structure information into desired formats.

Unique Settings: Field Examples | Guidance | JSON

Widget: The widget is the display UI used to input the value of the field. By default, the widget will be set to a traditional Input Field. However, you can change the widget to turn the text field into a calendar picker.

Input Mask: Use an Input Mask when a specific input format is needed. This is useful for enforcing formats like phone numbers, postal codes, SSN, etc.

Display Mask: A display mask helps to display the input in a readable way. This won't affect the value that is saved. To apply both view and saved formatting, delete Display Mask and use Input Mask instead.

Mask Examples:

  • 9: Numeric
  • a: Alphabetical
  • *: Alphanumeric

Example: A Phone Number mask: (999) 999-9999

See the jquery.inputmask documentation for more information.

Apply Mask On: Determines when this component should trigger the configured mask. Defaults to Change.

  • Change: Validation will actively trigger any time there is a change in the field. This is the default option.
  • Blur: Validation will only trigger when the field is no longer focused.

Input Mask Placeholder Char: Specify a character to be used as a placeholder in the field.

Placeholder char will be replaced by a space if it is used inside the mask.

Allow Multiple Masks: Check this setting if the field should allow the end-user to select a mask from a dropdown menu.

Once selected, a grid will appear where you can add a label and corresponding input mask. Click the + Add Another button to add a new Input Mask.