Attach real-time input masking to any input element
useMask attaches real-time input masking to any <input> element via a ref callback. It formats user input against a defined pattern and exposes both the masked display value and the raw unmasked value. If you need a ready-made input component, use MaskInput which wraps this hook with all standard input props.
Use isComplete to check whether all required mask slots are filled — for example, to control a submit button. The slotChar option accepts a multi-character string to show positional hints for each slot. The transform option converts each character before validation — this example uses it to auto-uppercase input so the A token ( [A-Z] ) accepts lowercase letters:
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:
Try starting with 34 or 37 for Amex format
Override or extend the built-in token map with the tokens option:
Prefix a token character with \ to treat it as a literal. In this example, A would normally be an uppercase letter token, but \A makes it a literal character:
For complex masks where built-in tokens are not enough, pass an array of string literals and RegExp objects. This example creates a time input where the first digit is restricted to 0-2 and the minute tens digit to 0-5 :
Use the reset function returned by the hook to programmatically clear the input value:
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:
The following pure functions are exported alongside the hook:
The UseMaskOptions and UseMaskReturnValue types are exported from the @mantine/hooks package; you can import them in your application: