Input with mask pattern for formatted text entry
MaskInput is a wrapper around useMask hook that provides all standard input props (label, description, error, etc.) and supports all mask options. The mask string defines the expected format using token characters ( 9 for digits, a for letters, etc.).
Use the modify option to change the mask based on the current input value. This example switches between standard and American Express credit card formats:
Override or extend the built-in token map with the tokens option:
For complex masks where built-in tokens are not enough, pass an array of string literals and RegExp objects:
Use the transform option to convert each character before validation. This example auto-uppercases input so the A token accepts lowercase letters:
Type lowercase letters – they will be auto-uppercased
Invalid phone number
MaskInput is uncontrolled internally – setting value from a parent will not clear it. Use the resetRef prop to get a function that clears the input value imperatively:
MaskInput is uncontrolled by design – it manages its own DOM value internally. To integrate with use-form , pass the initial value via defaultValue and use the onChangeRaw callback to write the raw (unmasked) value to form state. In uncontrolled form mode, pass { forceUpdate: false } to form.setFieldValue so the input is not remounted on every keystroke:
The mask string defines the expected format. Each character is either a token (editable slot) or a literal (fixed character inserted automatically).
Append ? after the last required character to mark remaining slots as optional:
Prefix a token character with \ to treat it as a literal: