Is there a way to add mask to Mantine input?

Last updated February 15, 2024

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:

Your phone

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

function Demo() {
  return (
    <InputBase
      label="Your phone"
      component={IMaskInput}
      mask="+7 (000) 000-0000"
      placeholder="Your phone"
    />
  );
}