Masked Input
A text field that formats as the user types and refuses values in the wrong format.
What it does. Asset tags, cost centres, serial numbers and phone numbers all have a shape. A plain text field accepts every variation of that shape, and the cleanup lands on whoever has to report on the data later. This field applies the format while the value is being typed.
Masked Input configuration
Save ConfigurationStart from a preset
The Template Library ships 19 presets, and this is all of them: US phone (local and with country code), phone extension, international phone, ZIP and ZIP+4, asset tag, project code, cost centre, serial number, hostname, SKU or part number, purchase order, order reference, invoice number, contract number, IPv4 address, MAC address and UUID.
Clicking a preset fills in the mask, the regular expression and the algorithm check. Everything stays editable afterwards. Start from a preset even if you need to change it — it is faster than writing a mask from scratch.
How the mask works
Mask Pattern describes the value position by position: # means a digit, A means a letter, and any other character is a literal that the app inserts for the user. AT-####-AAA accepts AT-4192-XDR and adds the dashes automatically.
| Setting | What it does | Notes |
|---|---|---|
| Allowed Characters | Restricts typing to Digits, Letters, Alphanumeric or Hexadecimal. | Blocks the wrong keystroke before it becomes a wrong value. |
| Letter Transform | No transform, Uppercase or Lowercase, applied while typing. | This is why at-4192-xdr and AT-4192-XDR do not both end up in your reports. |
| Validation Regex | An extra check against the raw value, with the mask literals removed. | For rules a mask cannot express. |
| Algorithm Check | No algorithm check, US phone rules or IPv4 parser. | Structural validation beyond the pattern, so 999.999.999.999 is rejected as an IP address. |
What the user sees
- Helper Text
- Shown under the field. Say where the value comes from: “Asset tag printed on the device label” is useful; “Enter asset tag” is not.
- Invalid Value Message
- Shown when validation fails. Always include a correct example.
- Block invalid values
- On: the value cannot be saved. Off: the user is warned but the value is accepted. Start with it off on an existing field, then turn it on once the legacy values are cleaned up.
- Preview
- Types a sample value through your current settings, inside the configuration screen. Use it before saving.