React Input Mask
Overview
Often when we create a form page on a website, we keep certain input fields. Now suppose we created a simple input field for the phone number of users, and someone typed abcdefghij. Is it a valid phone number? No, but the user has typed it, and the form is going to accept this. One may say, we can use the <input type="number" /> attribute to restrict this, yes that can be done, and we have covered why that shouldn't be the approach in the later sections of this article. So what should we do? A possible solution for this issue could be Input Masking.
Introduction to Masked Input
Most of the websites that we build today are more likely to be using some kind of form-filling functionality. It could be a sign-in page, registration for some event, subscribing to a newsletter, or something else as well. And to do any of these, we will be needing to ask the user to enter certain details like their Name, Phone Number, Email Address, etc.
Now, suppose there is a website having a form with two input fields, first for the user's name and second for their phone number, but the developers have not specified any restriction on the inputs, meaning the phone number input field can even accept alphabetical values as a valid input along with numeric values, and that can create a problem.
To avoid this, we can use something called input masks, they simply mean, restricting the user to enter only certain allowed characters in a specific input field. Considering our example above, to correct the above issue, we will use an input mask on the phone-number field, so that it will only accept values from 0 to 9.
Why is type="number" not the best solution every time?
Now a question can be, we already have :
Using this we can restrict the users to only enter numerical values in the form, why bother about input masks ?
Yes, that's correct. But what if, in some cases, we want the user to enter a value like this a1b2c3d4.. i.e., firstly an alphabet, then a number, then again an alphabet, again a number, and so on, do we have an HTML input type for this ?
No, we do not have. That's what I want to say here, if we are about to use certain general input types like number, email, etc., then it's fine to use them there, but if our requirement is something different from this, then also we can create it, using the react input masking.
Placeholders vs Input Maks
One thing I want to add here is that be clear between placeholders in forms with input masking. Both of them are different things. A placeholder helps the user to get to know what type of input they should fill in that field, but if the user chooses to avoid it, and enters something different from the mentioned format, then the placeholder is not going to complain, whereas an input mask restricts the user to only type what is allowed, for example - it will not let a user enter alphabetical values in a masked phone-number field.
Installation
To install the react input mask package, we can run :
Properties
| Name | Type | Description |
|---|---|---|
| mask | {String|Array<String, RegExp>} | Mask format, can be either a string or an array of characters and regular expressions. |
| maskPlaceholder | {String} | Placeholder to cover unfilled parts of the mask, the default value is _. |
| alwaysShowMask | {Boolean} | Whether mask prefix and placeholder should be displayed when input is empty and has no focus |
| beforeMaskedStateChange | {Function} | Function to modify value and selection before applying mask |
| children | {ReactElement} | Custom render function for integration with other input components |
Input Masking in React Applications
The package that we installed ie. react-input-mask is one of the most used packages for performing input masking in react applications. It offers the developers a vibrant and flexible way to work with it, its working behavior also follows a UX-friendly design pattern.
Let's see an example to understand it better.
Output before and after entering the input :
Basic Examples
Let's now look at some of the basic use cases for input masking.
4-digit PIN
Program for masked input react :
Google-style OTP
Program for masked input react :
Standard Credit Card
Program for masked input react :
Simple Date Input
Program for masked input react :
Conclusion
- Sometimes in form inputs, users enter some else type of value instead of what should be entered value.
- To prevent this, we can either use placeholders or input masking.
- Placeholders in input fields indicate what type of input a user should enter, but they do not restrict the wrong inputs.
- Whereas input masking is a way to restrict users to only enter the input in the field in a pre-prescribed format.
- The react-input-mask package is one of the most popular packages to perform input masking in react. It is flexible, simple to work with, and offers a range of properties to ease our work.