Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
May 19, 2020 20:48
April 1, 2020 21:18
May 19, 2020 20:48
May 19, 2020 20:48
August 1, 2018 22:18
August 1, 2018 22:18
August 1, 2018 22:18
June 25, 2016 14:58
March 1, 2020 13:57
May 19, 2020 20:48
August 1, 2018 22:18
August 1, 2018 22:18
May 19, 2020 20:48
December 16, 2017 15:07


Travis Codacy Badge npm version npm downloads Documents

Cleave.js has a simple purpose: to help you format input text content automatically.


  • Credit card number formatting
  • Phone number formatting (i18n js lib separated for each country to reduce size)
  • Date formatting
  • Numeral formatting
  • Custom delimiter, prefix and blocks pattern
  • CommonJS / AMD mode
  • ReactJS component
  • AngularJS directive (1.x)
  • ES Module

TL;DR the demo page


The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.

However, this isn't meant to replace any validation or mask library, you should still sanitize and validate your data in backend.



npm install --save cleave.js


cleave.js is available on jsDelivr and on

old school

Grab file from dist directory


Simply include

<script src="cleave.min.js"></script>
<script src="cleave-phone.{country}.js"></script>

cleave-phone.{country}.js addon is only required when phone shortcut mode is enabled. See more in documentation: phone lib addon section

Then have a text field

<input class="input-phone" type="text"/>

Now in your JavaScript

var cleave = new Cleave('.input-phone', {
    phone: true,
    phoneRegionCode: '{country}'

.input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different CSS selectors and apply to each of them, effectively, you might want to create individual instance by a loop, e.g. loop solution

More examples: the demo page


var Cleave = require('cleave.js');

var cleave = new Cleave(...)


require(['cleave.js/dist/cleave.min', 'cleave.js/dist/addons/cleave-phone.{country}'], function (Cleave) {
    var cleave = new Cleave(...)

ES Module

// Rollup, WebPack
import Cleave from 'cleave.js';
var cleave = new Cleave(...)

// Browser
import Cleave from 'node_modules/cleave.js/dist/cleave-esm.min.js';
var cleave = new Cleave(...)


Types are contributed by the community and are available via npm install --save-dev @types/cleave.js. Once installed, you can import Cleave like the following:

import Cleave = require('cleave.js');

Types for the React-component are also available and can be imported in the same way.

import Cleave = require('cleave.js/react');

ReactJS component usage

import React from 'react';
import ReactDOM from 'react-dom';

import Cleave from 'cleave.js/react';

Then in JSX:

class MyComponent extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.onCreditCardChange = this.onCreditCardChange.bind(this);
        this.onCreditCardFocus = this.onCreditCardFocus.bind(this);

    onCreditCardChange(event) {
        // formatted pretty value

        // raw value

    onCreditCardFocus(event) {
        // update some state

    render() {
        return (
            <Cleave placeholder="Enter your credit card number"
                options={{creditCard: true}}
                onChange={this.onCreditCardChange} />

As you can see, here you simply use <Cleave/> as a normal <input/> field

  • Attach HTML <input/> attributes
  • Pass in the custom options prop
  • Add ReactJS onChange event listener

Advanced usage:

Usage for Webpack, Browserify and more in documentation: ReactJS component usage

AngularJS directive usage

First include the directive module:

<script src="cleave.js/dist/cleave-angular.min.js"></script>
<script src="cleave.js/dist/addons/cleave-phone.{country}.js"></script>

And in your model:

angular.module('app', ['cleave.js'])

.controller('AppController', function($scope) {
    $scope.onCreditCardTypeChanged = function(type) {
        $scope.model.creditCardType = type;

    $scope.model = {
        rawValue: ''

    $scope.options = {
        creditCard: {
            creditCard: true,
            onCreditCardTypeChanged: $scope.onCreditCardTypeChanged

Then easily you can apply cleave directive to input field:

<div ng-controller="AppController">
    <input ng-model="model.rawValue" ng-whatever="..." type="text" placeholder="Enter credit card number"

More usage in documentation: Angular directive usage

Use in VueJs

While this package does not have an official support for use in VueJs. This can be done in few simple steps. Please check here

jQuery fn usage

Please check here



Run tasks

npm install

Build assets

gulp build

Run tests

gulp test


gulp eslint

Publish (build, tests & lint)

gulp publish

For contributors, please run gulp publish to ensure your PR passes tests and lint, also we have a not in the plan list you may concern.

Get in touch



Cleave.js is licensed under the Apache License Version 2.0