AdminKit

Bootstrap 5 Input mask

Input mask ​

The input mask component for Bootstrap 5 is an extension on top of the native input element. It allows to set a predefined format of form inputs, including a phone number, date, ip address, number, datetime, time and more.

WARNING

This feature is only available in AdminKit PRO. Learn more.

Date examples ​

One of the most frequently used input masks are date inputs. The plugin allows multiple date input formats (e.g. DD/MM/YYYY and MM/DD/YYYY).

e.g "DD/MM/YYYY"
e.g "MM/DD/YYYY"
html
<div class="form-group mb-3">
  <label class="form-label">Date</label>
  <input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" />
  <small class="text-muted">e.g "DD/MM/YYYY"</small>
</div>

<div class="form-group">
  <label class="form-label">Date</label>
  <input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="mm/dd/yyyy" />
  <small class="text-muted">e.g "MM/DD/YYYY"</small>
</div>

Other examples ​

Besides the example above, the input masks plugin features some presets, like phone numbers, ip addresses, time inputs, emails and many more.

e.g "9-ABC-123"
e.g "123,456,789"
e.g "123.123.123.123"
e.g "support@adminkit.io"
html
<div class="form-group mb-3">
  <label class="form-label">License Plate</label>
  <input type="text" class="form-control" data-inputmask-mask="[9-]AAA-999" />
  <small class="text-muted">e.g "9-ABC-123"</small>
</div>
<div class="form-group mb-3">
  <label class="form-label">Decimal</label>
  <input type="text" class="form-control" data-inputmask="'alias': 'decimal', 'groupSeparator': ','" />
  <small class="text-muted">e.g "123,456,789"</small>
</div>
<div class="form-group mb-3">
  <label class="form-label">IP Address</label>
  <input type="text" class="form-control" data-inputmask="'alias': 'ip'" />
  <small class="text-muted">e.g "123.123.123.123"</small>
</div>
<div class="form-group">
  <label class="form-label">Email Address</label>
  <input type="text" class="form-control" data-inputmask="'alias': 'email'" />
  <small class="text-muted">e.g "support@adminkit.io"</small>
</div>

Customize ​

You can also choose to create your custom input mask, and set things like the seperator, amount of digits and preferred prefix (e.g. $). All available options can be found on the official GitHub repository.

e.g "€ 9,95"
e.g "$ 9,95"
html
<div class="form-group mb-3">
  <label class="form-label">Currency</label>
  <input type="text" class="form-control" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'digits': 2, 'digitsOptional': false, 'prefix': '€ ', 'placeholder': '0'" />
  <small class="text-muted">e.g "€ 9,95"</small>
</div>

<div class="form-group">
  <label class="form-label">Currency</label>
  <input type="text" class="form-control" data-inputmask="'alias': 'numeric', 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'" />
  <small class="text-muted">e.g "$ 9,95"</small>
</div>