Masked Input

Masked Input

The Masked Input component formats user input as they type (e.g. phone as (555) 123-4567). You define a mask pattern; the component enforces it and can output a clean value (e.g. digits only) for storage.

Key properties

Property	Type	Description	Example
mask	Text	The pattern the input must follow. Placeholders: 0 (digit), 9 (optional digit), # (digit or space), L (letter), A (letter or digit).	(000) 000-0000
value	Text	Current text (input/output). Bind to a column or variable.	(555) 123-4567
placeholder	Text	Shown when the field is empty.	Enter phone #
placeholderChar	Text	Character used for unfilled positions in the mask (optional).	_

Usage

• Canvas: Set Value to a data source (e.g. ThisItem.Phone). Use MaskedInput1.Value in formulas to get the current value (often stored as digits only, depending on the component). Example: Patch(Contacts, ThisItem, { Phone: MaskedInput1.Value }).
• Model-Driven: Add the control to a Single line of text column; bind the column to the component’s Value.

Example (Canvas)

// Phone mask
MaskedInput1.Mask = "(000) 000-0000"
MaskedInput1.Value = ThisItem.Phone

// Save on submit
Patch(Contacts, ThisItem, { Phone: MaskedInput1.Value })

Common masks

Use case	Mask example
US phone	(000) 000-0000
Zip code	00000 or 00000-0000
Date	00/00/0000
Alphanumeric ID	AAAA-0000