Input mask

An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.


To be able to use the input mask in your application you will need to install the imask dependency with npm install imask.

Default markup

Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.

<label class="form-label">Telephone mask</label>
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off" />
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like Tabler? tweet about it!
Support Tabler's development: Github Sponsors