Bootstrap 5 Input mask
The input mask component for Bootstrap 5 extends the native `input` element, allowing formats for form inputs like phone numbers, dates and IP addresses.
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. Learn more.
AdminKit PRO uses Inputmask 5. When the page loads, it masks every input with a data-inputmask, data-inputmask-mask, data-inputmask-alias or data-inputmask-regex attribute; other inputs are left alone. Write the mask in those attributes, as in the examples below.
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).
<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 has presets for phone numbers, ip addresses, time inputs, emails and more.
<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 create your own input mask and set the separator, the number of digits and a prefix (e.g. $). All available options can be found on the official GitHub repository.
<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>Inputs added later
Inputs added to the page after it has loaded are not masked automatically. window.Inputmask is available for them:
window.Inputmask().mask(document.querySelectorAll("[data-inputmask]"));Last updated on
Validation
Give your users actionable feedback with HTML5 form validation for Bootstrap, via browser default behaviors or custom styles and JavaScript.
Bar chart
Bar charts compare values between categories with horizontal or vertical bars. Chart.js and ApexCharts examples that follow light and dark mode.