Phone number input mask

Bootstrap 5 Phone number input mask component

Responsive Phone number input mask built with Bootstrap 5. Bootstrap phone number input mask allows you to easily format the input according to a given pattern.

Basic example

Input Mask comes with three predefined masks directives:

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

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

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 data-mdb-input-init class="form-outline mb-3" style="width: 100%; max-width: 22rem">
  <input type="text" id="phone" class="form-control" data-mdb-input-mask-init data-mdb-input-mask="+48 999-999-999" />
  <label class="form-label" for="phone">Phone number with country code</label>
</div>