Input Mask

Bootstrap 5 Input Mask plugin

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

Responsive Input Mask directive for the latest Bootstrap 5. Set a predefined format of forms. Phone number, special characters, clear incomplete & other examples.

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'
                  />
                )
              }

Input Mask - API

Import

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

Properties

MDBInputMask

Name Type Default Description Example
charPlaceholder string '_' Placeholder character for covered characters in mask. Visible while typing only when maskPlaceholder is set to true <MDBInputMask charPlaceholder='-' maskPlaceholder />
clearIncomplete boolean true Clear incomplete input value on blur <MDBInputMask clearIncomplete={false} />
customMask string '' Defines character to be used as custom mask. Allows multiple characters to be passed, separated by comma <MDBInputMask customMask='p' />
customValidator string '' Regex pattern to match characters in mask. Allows multiple validators corespondiing to their masks to be passed, separated by comma. <MDBInputMask customValidator='[abc]' />
inputMask string '' Defines Input Mask pattern <MDBInputMask inputMask='aaa999***' />
inputPlaceholder boolean true Shows information about the mask pattern on inactive input <MDBInputMask inputPlaceholder={false} />
label string '' Set label for Input Mask <MDBInputMask label='example' />
maskPlaceholder boolean false Sets charPlaceholder on or off <MDBInputMask maskPlaceholder />

Events

Name Type Description
onComplete (value: string) => any Fires when InputMask receives completed mask pattern value. Returns string with completed value.
onInputChange (value: string) => any Fires when InputMask receives new value. Return string with input typed characters.