# 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](/pricing/).

AdminKit PRO uses [Inputmask](https://github.com/RobinHerbots/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`).

```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 has presets for phone numbers, ip addresses, time inputs, emails and more.

```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 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 <a href="https://github.com/RobinHerbots/Inputmask" target="_blank" rel="noreferrer nofollow">official GitHub repository</a>.

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

## Inputs added later

Inputs added to the page after it has loaded are not masked automatically. `window.Inputmask` is available for them:

```js
window.Inputmask().mask(document.querySelectorAll("[data-inputmask]"));
```

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/forms/input-mask/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io