MaskInput | Mantine

Usage

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.).

Input label

Input description

Variant

Default

Filled

Unstyled

Size

Radius

Label

With asterisk

Description

Error

import { MaskInput } from '@mantine/core';

function Demo() {
  return (
    <MaskInput
      label="Input label"
      description="Input description"
      mask="(999) 999-9999"
      placeholder="(___) ___-____"
    />
  );
}

Dynamic mask

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:

Credit card

import { MaskInput } from '@mantine/core';

function Demo() {
  return (
    <MaskInput
      label="Credit card"
      placeholder="____ ____ ____ ____"
      mask="9999 9999 9999 9999"
      modify={(value) => {
        if (/^3[47]/.test(value)) {
          return { mask: '9999 999999 99999' };
        }
        return undefined;
      }}
    />
  );
}

Custom tokens

Override or extend the built-in token map with the tokens option:

Hex color

import { MaskInput } from '@mantine/core';

function Demo() {
  return (
    <MaskInput
      label="Hex color"
      placeholder="#______"
      mask="#hhhhhh"
      tokens={{ h: /[0-9a-fA-F]/ }}
    />
  );
}

Regex array format

For complex masks where built-in tokens are not enough, pass an array of string literals and RegExp objects:

Time (HH:MM)

import { MaskInput } from '@mantine/core';

function Demo() {
  return (
    <MaskInput
      label="Time (HH:MM)"
      placeholder="__:__"
      mask={[/[0-2]/, /\\d/, ':', /[0-5]/, /\\d/]}
    />
  );
}

Transform

Use the transform option to convert each character before validation. This example auto-uppercases input so the A token accepts lowercase letters:

Promo code

Type lowercase letters – they will be auto-uppercased

import { MaskInput, Text } from '@mantine/core';
import { formatMask, isMaskComplete } from '@mantine/hooks';

function Demo() {
  return (
    <>
      <MaskInput
        label="Promo code"
        placeholder="AAA-9999"
        mask="AAA-9999"
        transform={(char) => char.toUpperCase()}
        slotChar="XXX-0000"
      />
      <Text size="sm" mt="sm" c="dimmed">
        Type lowercase letters – they will be auto-uppercased
      </Text>
    </>
  );
}

Disabled state

Phone number

import { MaskInput } from '@mantine/core';

function Demo() {
  return (
    <MaskInput
      label="Phone number"
      placeholder="(___) ___-____"
      mask="(999) 999-9999"
      disabled
    />
  );
}

Error state

Phone number

Invalid phone number

import { MaskInput } from '@mantine/core';

function Demo() {
  return (
    <MaskInput
      label="Phone number"
      placeholder="(___) ___-____"
      mask="(999) 999-9999"
      error="Invalid phone number"
    />
  );
}

Mask pattern syntax

The mask string defines the expected format. Each character is either a token (editable slot) or a literal (fixed character inserted automatically).

Built-in tokens

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])

Optional segments

Append ? after the last required character to mark remaining slots as optional:

<MaskInput mask="(999) 999-9999? x9999" /> // Extension is optional

Escaping

Prefix a token character with \ to treat it as a literal:

<MaskInput mask="\A999" /> // "A" is literal, not a token

JsonInput

NativeSelect