Back to all questions

Is there a way to add mask to Mantine input?

Last updated

Mantine does not provide built-in mask functionality, but you can easily integrate any mask library with Mantine inputs. The recommended library is react-imask:

yarn add react-imask

You can use it with InputBase component to create custom input with mask:

import { IMaskInput } from 'react-imask';
import { InputBase } from '@mantine/core';

function Demo() {
  return (
      label="Your phone"
      mask="+7 (000) 000-0000"
      placeholder="Your phone"