⭐️ If you like this product, please support us by starring our GitHub repository! Star ⭐️
GitHub Download Get AdminKit Pro

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.

This feature is only available in AdminKit PRO. Upgrade now.

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"
<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"
<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"
<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>