Masked input component for React

Usage no npm install needed!

<script type="module">
  import reactInputMaskPlus from '';



Build Status npm version npm downloads

Yet another React component for input masking. Made with attention to UX. Compatible with IE8+.



npm install react-input-mask --save

Also you can use it without a module bundler

<!-- Load React first -->
<script src=""></script>
<script src=""></script>
<!-- Will be exported to window.ReactInputMask -->
<script src=""></script>


mask : string

Mask string. Default format characters are:
9: 0-9
a: A-Z, a-z
*: A-Z, a-z, 0-9

Any character can be escaped with a backslash. It will appear as a double backslash in JS strings. For example, a German phone mask with unremoveable prefix +49 will look like mask="+4\9 99 999 99" or mask={'+4\\9 99 999 99'}

maskChar : string

Character to cover unfilled parts of the mask. Default character is "_". If set to null or empty string, unfilled parts will be empty as in ordinary input.

formatChars : object

Defines format characters with characters as a keys and corresponding RegExp strings as a values. Default ones:

  '9': '[0-9]',
  'a': '[A-Za-z]',
  '*': '[A-Za-z0-9]'

alwaysShowMask : boolean

Show mask when input is empty and has no focus.


import React from 'react';
import InputMask from 'react-input-mask';

class PhoneInput extends React.Component {
  render() {
    return <InputMask {...this.props} mask="+4\9 99 999 99" maskChar=" " />;


Thanks to BrowserStack for the help with testing on real devices