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)

To initialize Input Mask on element add data-mdb-input-mask attribute with mask format to input.

Edit in sandbox 
        
            
          <div class="form-outline">
            <input type="text" id="basic-example" class="form-control" data-mdb-input-mask="99-999-99"/>
            <label class="form-label" for="basic-example">Basic example</label>
          </div>

Clear incomplete

By default, Input Mask will clear incomplete input value on blur. Turn this behavior off with data-mdb-clear-incomplete="false".

Edit in sandbox 
        
            
          <div class="form-outline">
            <input type="text" id="clear-incomplete" class="form-control" data-mdb-input-mask="99-999-99" data-mdb-clear-incomplete="false"/>
            <label class="form-label" for="clear-incomplete">Clear incomplete</label>
          </div>

Custom mask

Define custom mask with data-mdb-custom-mask for mask symbol and data-mdb-custom-validator with custom mask regex pattern. Example below will only allow abc letters to be typed for p mask.

Edit in sandbox 
        
            
          <div class="form-outline">
            <input type="text" id="custom-mask" class="form-control" data-mdb-input-mask="999ppp999" data-mdb-custom-mask="p" data-mdb-custom-validator="[abc]"/>
            <label class="form-label" for="custom-mask">Custom mask</label>
          </div>

You can also set more than one mask by passing multiple characters separated by comma to data-mdb-custom-mask, and their coresponding validators separated by comma to data-mdb-custom-validator

Edit in sandbox 
        
            
          <div class="form-outline">
            <input type="text" id="custom-masks" class="form-control" data-mdb-input-mask="pppbbbccc" data-mdb-custom-mask="p,b,c" data-mdb-custom-validator="[abc],[1-2],[^a-c]"/>
            <label class="form-label" for="custom-masks">Custom mask</label>
          </div>

Special characters

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

Edit in sandbox 
        
            
          <div class="form-outline">
            <input type="text" id="phone" class="form-control" data-mdb-input-mask="+48 999-999-999"/>
            <label class="form-label" for="phone">Phone number with country code</label>
          </div>
          <div class="form-outline">
            <input type="text" id="book" class="form-control" data-mdb-input-mask="ISBN 0-99999-999-0"/>
            <label class="form-label" for="book">Book number</label>
          </div>

Mask placeholder

Set placeholder for mask while typing with data-mdb-mask-placeholder="true". Default placeholder is an underscore sign _. Change it with data-mdb-char-placeholder. You can use single character or define placeholder for whole mask

Edit in sandbox 
        
            
          <div class="form-outline">
            <input type="text" id="defaultPlaceholder" class="form-control" data-mdb-input-mask="(99)-999-99" data-mdb-mask-placeholder="true"/>
            <label class="form-label" for="defaultPlaceholder">Default placeholder</label>
          </div>
          <div class="form-outline">
            <input type="text" id="customPlaceholder" class="form-control" data-mdb-input-mask="99/99/9999 99:99" data-mdb-mask-placeholder="true" data-mdb-char-placeholder="dd/mm/yyyy hh:mm"/>
            <label class="form-label" for="customPlaceholder">Custom placeholder</label>
          </div>

Input Mask - API

Usage

Input Mask comes with three predefined masks formats:

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

To initialize Input Mask on element add data-mdb-input-mask attribute with mask format to input.

Via data attributes

Edit in sandbox 
        
            
        <input type="text" data-mdb-input-mask="aaa999***"/>

Via JavaScript

Edit in sandbox 
        
            
        const options = {
          inputMask: "aaa999***"
        }
        const inputElement = document.getElementById('js-usage-example');
        const instance = new Inputmask(inputElement, options)

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
        
            
        $(document).ready(() => { 
          $('#jquery-usage-example').inputMask();
        });

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-input-mask="aaa".

Name Type Default Description
inputMask String "" Defines Input Mask pattern to be added to input element
charPlaceholder String "_" Placeholder character for covered characters in mask. Visible while typing only when maskPlaceholder is set to true
maskPlaceholder Boolean false Sets charPlaceholder on or off
inputPlaceholder Boolean true Shows information about the mask pattern on inactive input
clearIncomplete Boolean true Clear incomplete input value on blur
customMask String "" Defines character to be used as custom mask. Allows multiple characters to be passed, separated by comma
customValidator String "" Regex pattern to match characters in mask. Allows multiple validators corespondiing to their masks to be passed, separated by comma.

Methods

Name Parameters Description Example
dispose Removes the Inputmask instance. instance.dispose()
getInstance element Static method which allows to get the Inputmask instance associated with a DOM element. Inputmask.getInstance(element)
Edit in sandbox 
        
            
        const inputElement = document.getElementById('inputmask-example');
        const instance = Inputmask.getInstance(inputElement);
        isntance.dispose();

Events

Name Description
input.mdb.inputmask Emitted when Inputmask instance element receives new value. Returns value object inside event callback with input typed characters.
complete.mdb.inputmask Emitted when Inputmask instance element receives completed mask pattern value. Returns value object inside event callback with completed value.
Edit in sandbox 
        
            
          const inputElement = document.getElementById('inputmask-example');
          inputElement.addEventListener('complete.mdb.inputmask', () => {
            alert('Mask input completed!');
          });

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
        import InputMask from 'mdb-input-mask';