Input Mask

Bootstrap 5 Input Mask plugin

The Input Mask is a custom directive which allows to set a predefined format of forms.

Note: Read the API tab to find all available options and advanced customization

Basic example

Input Mask comes with three predefined masks directives:

• a - Alpha characters (defaut: A-Z,a-z)
• 9 - Numeric characters (0-9)
• * - Alphanumeric characters (A-Z,a-z,0-9)

The Input Mask can be placed anywhere on the page. You can initialize it using <MDBInputMask /> with inputMask format.

import React from 'react';
import { MDBInputMask } from 'mdb-react-input-mask';

export default function App() {
  return (
    <MDBInputMask label='Basic example' inputMask='aaa999***' />
  )
}

Clear incomplete

By default, Input Mask will clear incomplete input value on blur. Turn this behavior off by passing clearIncomplete={false} as prop.

import React from 'react';
import { MDBInputMask } from 'mdb-react-input-mask';

export default function App() {
  return (
    <MDBInputMask label='Clear incomplete' inputMask='aaa999***' clearIncomplete={false}/>
  )
}

Custom mask

Define custom mask with customMask for mask symbol and customValidator with custom mask regex pattern. Example below will only allow abc letters to be typed for p mask.

import React from 'react';
import { MDBInputMask } from 'mdb-react-input-mask';

export default function App() {
  return (
    <MDBInputMask label='Custom mask' inputMask='999ppp999' customMask='p' customValidator='[abc]'/>
  )
}

You can also set more than one mask by passing multiple characters separated by comma to customMask, and their coresponding validators separated by comma to customValidator

import React from 'react';
import { MDBInputMask } from 'mdb-react-input-mask';

export default function App() {
  return (
    <MDBInputMask
      label='Custom mask'
      inputMask='pppbbbccc'
      customMask='p,b,c'
      customValidator='[abc],[1-2],[^a-c]'
    />
  )
}

Special characters

Input Mask allows any non alphanumeric character to be used inside the inputMask. Those characters will be hardcoded into the input during typing

import React from 'react';
import { MDBInputMask } from 'mdb-react-input-mask';

export default function App() {
  return (
    <MDBInputMask label='Phone number with country code' inputMask='+48 999-999-999' />
    <MDBInputMask label='Book number' inputMask='ISBN 0-99999-999-0' />
  )
}

Mask placeholder

Set placeholder for mask while typing with maskPlaceholder. Default placeholder is an underscore sign _. Change it with charPlaceholder. You can use single character or define placeholder for whole mask

import React from 'react';
import { MDBInputMask } from 'mdb-react-input-mask';

export default function App() {
  return (
    <MDBInputMask label='Default placeholder' inputMask='(99)-999-99' maskPlaceholder />
    <MDBInputMask
      label='Custom placeholder'
      inputMask='99/99/9999 99:99'
      maskPlaceholder
      charPlaceholder='dd/mm/yyyy hh:mm'
    />
  )
}