Undergoing a meaningful dialogue on the web requires a number of forms.
While the most of the attention has been reasonably placed on certain aspects such as validation, it’d be relatively easy to improve the form where it is closest to the user — its design.
Doing this will not only make our lives (as developers) easier, but also our users’. It’s a win-win. One way to do this is to format form inputs in real time to model its real-life equivalent. One tool that enables us do this is Cleave.js.
What is Cleave.js?
To paraphrase, Cleave.js helps you format your <input/>
value as you type. That’s it.
This tutorial is about how to use the Cleave.js library with React. You can also check the GitHub page to see how to use it in other ways.
What can you format?
Cleave.js allows you to do 6 types of formatting:
- Credit card numbers
- Phone numbers
- Date formatting
- Time formatting
- Numeral formatting
- Custom formatting (Prefix, Blocks, Delimiters etc)
Using CleaveJS with React
Instead of showing you how all the format types work in isolation, I’ve built a simple makeshift donation form:
As annotated, we’ll be touching on:
1 → Credit card number/type formatting
2 → Date formatting
3 → Digit formatting
4 → Numeral formatting
5 → Phone number formatting
6 → Custom formatting (with prefix, blocks, and delimiters).
To get started, I’ve created a CodeSandbox and installed the Cleave.js package.
The first step is to import Cleave.js:
import Cleave from "cleave.js/react";
Then, we use it instead of an <input/>
:
<Cleave placeholder="Enter credit card number" className="form-field" />
The <Cleave/>
component returns an <input/>
form element with the appropriate type (we don’t need to specify or bother about what type it returns). For its configuration, it takes an options
props, which is a config for the different kind of formatting that can be done.
Credit Card Formatting
const [creditCardNo, setCreditCardNo] = useState(""); function onCreditCardChange(e) { setCreditCardNo(e.target.rawValue); } <Cleave placeholder="Enter credit card number" options={{ creditCard: true, }} onChange={e => onCreditCardChange(e)} className="form-field" />
With the creditCard
property to true
and an onChange
event handler. The creditCardNo
state gets updated by accessing the formatted input value with e.target.rawValue
.
This alone formats the input as the user types.
However, what would be fun is to be proactive and show them the kind of credit card provider the digits correspond to.
To do this, we pass in the onCreditCardTypeChanged
event handler to the options
property.
const [creditCardNo, setCreditCardNo] = useState(""); const [creditCardType, setCreditCardType] = useState(""); function onCreditCardTypeChanged(type) { setCreditCardType(type); } function onCreditCardChange(e) { setCreditCardNo(e.target.rawValue); } <Cleave placeholder="Enter credit card number" options={{ creditCard: true, onCreditCardTypeChanged }} onChange={e => onCreditCardChange(e)} className="form-field" />
Unlike the
onChange
property on the<Cleave/>
component,onCreditCardTypeChanged
event handler is added as a property ofoptions
and accessed through thetype
(type
is only a name, you can name it whatever you like).
Date Formatting
const [creditCardExpiryDate, setCreditCardExpiryDate] = useState(""); function onCreditCardExpiryChange(e) { setCreditCardExpiryDate(e.target.rawValue); } <Cleave placeholder="MM/YY" options={{ date: true, datePattern: ["m", "d"] }} onChange={onCreditCardExpiryChange} className="form-field" />
We’ve switched the options
prop to have the type of date
set to true and we’re formatting with a datePattern
similar to that of credit cards, showing only the month and day.
Block formatting
While there are other ways to enforce the three digits maximum for CVVs, cleave also offers an indirect way to do this. With blocks, you can pre-define the maximum length an input can be, and how many blocks. This is represented in an array.
For example, a block of [2]
will make sure the user can only type two characters. Using this knowledge, we can cleave our CVV input as:
const [cvv, setCVV] = useState(""); function onCVVChange(e) { setCVV(e.target.rawValue); } <Cleave placeholder="CVV" options={{ blocks: [3], numericOnly: true }} onChange={onCVVChange} className="form-field" />
This allows for a single block of characters with a maximum of three digits, which we enforced with numericOnly
set to true
.
Our credit card details formatting should give this result:
Numeral Formatting
const [donationAmount, setDonationAmount] = useState(""); function onDonationAmountChange(e) { setDonationAmount(e.target.rawValue); } <Cleave placeholder="0.00" options={{ numeral: true, numeralThousandsGroupStyle: "thousand" }} onChange={onDonationAmountChange} className="form-field" />
To format our donation amount, we set the numeral
property to true
and also set numeral formatting to thousand with numeralThousandsGroupStyle:
"thousand"
.
Keep in mind, this is an indirect way to format “currencies” as formatting currencies is locale dependent. Cleave formats numerals not currencies.
Phone number Formatting
This is a little different than the others. To begin with, you need to import the locale/country, in this case, Nigeria, before using it.
import "cleave.js/dist/addons/cleave-phone.ng"; const [phoneNumber, setPhoneNumber] = useState(""); function onPhoneChange(e) { setPhoneRawValue(e.target.rawValue); } <Cleave placeholder="0908 765 4321" options={{ phone: true, phoneRegionCode: "NG" }} onChange={onPhoneChange} className="form-field" />
Here, the phone
property is set to true, and the phoneRegionCode
is set to “NG”.
If you find the phone number formatting a little different from what you intend, Cleave also provides a custom formatting – check the next format.
Custom Formatting
Imagine you require your users to enter cryptic 2FA passphrases. Cleave can help with its custom formatting:
const [customValue, setCustomValue] = useState(""); function onCustomValueChange(e) { setCustomRawValue(e.target.rawValue); } <Cleave placeholder="KEY-2DJDH2-3I37X-2MXHGX" options={{ prefix: "KEY", blocks: [3, 6, 5, 6], delimiter: "—", numericOnly: false }} onChange={onCustomValueChange} className="form-field" />
Some of the options you can pass here is the prefix
, blocks
, delimiter
(for the blocks), numericOnly
etc.
This will ensure a formatting of 3, 6, 5, and 6 digits, separated with the delimiter value, the first blocks item will be for the prefix:
Form submission
It is important to always remember that Cleave.js is meant for formatting not validation, so it customizes — not enforce — the input values. Before submission, make sure to validate your forms.
When you try to submit the form you do not need to worry about how what goes in the state
or how the values gets transformed because Cleave.js strips all formatting away and gives you the raw value. If I try to submit this form:
I get the values in my state
:
creditCardNo: "4242424242424242" phoneRawValue: "09087363636" dateRawValue: "1222" donationAmount: "450000" customRawValue: "KEY27272bbc6262gbxy2" cvv: "222"
Conclusion
Having users fill out forms in this way is no doubt an interesting and credible way to go and will put us a step ahead.
Check out the links below for more.
1. Codesandbox link to full example
2. CleaveJS official website
3. CleaveJS GitHub project
Cut through the noise of traditional React error reporting with LogRocket
LogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

Focus on the React bugs that matter — try LogRocket today.