mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
73 lines
2.4 KiB
Plaintext
73 lines
2.4 KiB
Plaintext
---
|
|
title: Input mask
|
|
order: 11
|
|
summary: An input mask formats what the user types to a pattern, such as a phone number or a date, which makes the expected format clear and cuts validation errors.
|
|
description: Format user input automatically with input masks for dates, phone numbers, and other patterns to reduce validation errors.
|
|
docs-libs: [imask]
|
|
related: [/ui/forms/elements]
|
|
---
|
|
|
|
import Example from '@components/Example.astro'
|
|
import TabsPackage from '@components/TabsPackage.astro'
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
## Installation
|
|
|
|
Install the imask library:
|
|
|
|
<TabsPackage name="imask" />
|
|
|
|
And import or require:
|
|
|
|
```javascript
|
|
import IMask from 'imask'
|
|
```
|
|
|
|
Or include it from a CDN:
|
|
|
|
```html
|
|
<script src="https://cdn.jsdelivr.net/npm/imask"></script>
|
|
```
|
|
|
|
The [IMask documentation](https://imask.js.org/guide.html#installation) covers other ways to install it.
|
|
|
|
## Default markup
|
|
|
|
Use an input mask where the value has a fixed format, such as a phone number, a date or a card number.
|
|
|
|
To create an input mask, add the `data-mask` attribute to the input element:
|
|
|
|
```html
|
|
<input
|
|
type="text"
|
|
name="input-mask"
|
|
class="form-control"
|
|
data-mask="(00) 0000-0000"
|
|
placeholder="(00) 0000-0000"
|
|
autocomplete="off"
|
|
/>
|
|
```
|
|
|
|
<Example column>
|
|
<label class="form-label">Telephone mask</label>
|
|
<label class="form-label" for="mask-phone">Phone number</label>
|
|
<input type="text" id="mask-phone" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off" />
|
|
</Example>
|
|
|
|
## More examples
|
|
|
|
If you need more examples of input masks, you can find them in the [IMask documentation](https://imask.js.org/guide.html#masked-input).
|
|
|
|
## JavaScript
|
|
|
|
Tabler automatically initializes all elements with `data-mask` on page load. This is the code that runs:
|
|
|
|
<CodeDocs name="input-mask-init" file="core/js/src/input-mask.ts" />
|
|
|
|
## Accessibility
|
|
|
|
- A mask changes what the field accepts as the user types, which is easy to lose track of without sight. Say the expected format in a hint tied to the field with `aria-describedby`.
|
|
- Keep a real `label`. The placeholder shows the pattern, and it disappears as soon as typing starts.
|
|
- Do not block paste. A masked field that rejects a pasted phone number is a dead end for anyone using a password manager or a switch device.
|
|
- Use the right `type` and `autocomplete`, so the browser can still fill the field and the phone keyboard matches.
|