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>