apps/mantine.dev/src/pages/core/mask-input.mdx
import { MaskInputDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.MaskInput);
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:
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).
9 – any single digit ([0-9])a – any single letter ([A-Za-z])A – any uppercase letter ([A-Z])* – any alphanumeric character ([A-Za-z0-9])# – digit or sign ([-+0-9])Append ? after the last required character to mark remaining slots as optional:
<MaskInput mask="(999) 999-9999? x9999" /> // Extension is optional
Prefix a token character with \ to treat it as a literal:
<MaskInput mask="\A999" /> // "A" is literal, not a token