form-input-mask.mdx 779 B

123456789101112131415161718
  1. ---
  2. title: Input mask
  3. description: 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.
  4. ---
  5. <Callout>
  6. To be able to use the input mask in your application you will need to install the imask dependency with `npm install imask`.
  7. </Callout>
  8. ## Default markup
  9. 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.
  10. ```html example code centered columns={1}
  11. <label class="form-label">Telephone mask</label>
  12. <input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off" />
  13. ```