diff --git a/dev/index.html b/dev/index.html
index a0212314..135e41e9 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -12,19 +12,23 @@
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinHTML5.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
 
-	
+
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
-	
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
+	<!-- jQuery dependent -->
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js"></script>
+	<!-- Vanilla libs -->
 	<script type="text/javascript" src="https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js"></script>
+	<script type="text/javascript" src="https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js"></script>
+	<script type="text/javascript" src="https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js"></script>
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
+
   </head>
   <body>
     <div class="container-fluid"></div>
diff --git a/dev/schema.js b/dev/schema.js
index 5b18de9d..d932cc47 100644
--- a/dev/schema.js
+++ b/dev/schema.js
@@ -191,6 +191,39 @@ module.exports = {
 			styleClasses: "half-width"
 				//validator: validators.regexp
 		}, {
+			type: "cleave",
+			label: "Mobile  (Cleave.js field)",
+			model: "mobile",
+			cleaveOptions: {
+				// Credit Card
+			    creditCard: false,
+			    onCreditCardTypeChanged(type){
+					console.log("onCreditCardTypeChanged", type);	
+				},
+			    // Phone
+			    phone: false,
+    			phoneRegionCode: 'AU',
+    			// Date
+    			date: false,
+    			datePattern: ['d', 'm', 'Y'],
+    			// Numerals
+    			numeral: false,
+    			numeralThousandsGroupStyle: 'thousand',
+    			numeralDecimalScale: 2,
+    			numeralDecimalMark: '.',
+    			// General
+    			blocks: [0, 2, 3, 4],
+    			delimiter: ' ',
+    			delimiters: ['(', ') ', '-', '-'],
+    			// prefix: '(',
+    			numericOnly: true,
+    			uppercase: false,
+    			lowercase: false
+			},
+
+			styleClasses: "half-width",
+			validator: validators.required
+		}, {			
 			type: "masked",
 			label: "Mobile  (masked field)",
 			model: "mobile",
diff --git a/src/fields/fieldCleave.vue b/src/fields/fieldCleave.vue
new file mode 100644
index 00000000..0d9754df
--- /dev/null
+++ b/src/fields/fieldCleave.vue
@@ -0,0 +1,103 @@
+<template lang="jade">
+	input.form-control(type="text")
+</template>
+
+<script>
+import abstractField from "./abstractField";
+import { defaults } from "lodash";
+
+export default {
+	mixins: [abstractField],
+
+	data() {
+		return {
+			cleave: null
+		};
+	},
+
+	watch: {
+		/*model: {
+			get(){
+				if (window.Cleave) {
+					console.log("get model", this.model);
+				}
+			},
+			set(value) {
+				if (window.Cleave) {
+					console.log("set model", this.model, value);
+					
+				}
+			}
+		}*/
+	},
+
+	methods: {
+		/*formatValueToField(){
+			console.log(" 1 formatValueToField",this.cleave);
+			if (this.cleave) {
+
+				return this.cleave.getRawValue();
+			}else{
+				console.log("fail")
+				// this.cleave.element.value = "";
+				return "";
+			}
+		},*/
+		/*formatValueToModel(newValue){
+			console.log(" 2 formatValueToModel");
+			this.cleave.setRawValue(newValue);
+			return newValue;
+		}*/
+		// onCreditCardTypeChanged(type){
+		// 	let onCreditCardTypeChanged = this.schema.onCreditCardTypeChanged;
+		// 	if (typeof(onNewTag) == "function") {
+		// 		onNewTag(newTag, id, this.options, this.value);
+		// 	}
+		// }
+		/*onChange(value) {
+			console.log(value);
+			if (value.length === 1) {
+				// Single value
+				this.value = parseFloat(value[0]);
+			} else {
+				// Array (range)
+				this.value = [parseFloat(value[0]), parseFloat(value[1])];
+			}
+		}*/
+	},
+
+	ready() {
+		if (window.Cleave) {
+			this.cleave = new Cleave(this.$el, defaults(this.schema.cleaveOptions || {}, {
+				// Credit Card
+			    creditCard: false,
+			    // onCreditCardTypeChanged: onCreditCardTypeChanged.bind(this),
+			    // Phone
+			    phone: false,
+    			phoneRegionCode: 'AU',
+    			// Date
+    			date: false,
+    			datePattern: ['d', 'm', 'Y'],
+    			// Numerals
+    			numeral: false,
+    			numeralThousandsGroupStyle: 'thousand',
+    			numeralDecimalScale: 2,
+    			numeralDecimalMark: '.',
+    			// General
+    			blocks: [],
+    			delimiter: ' ',
+    			prefix: null,
+    			numericOnly: false,
+    			uppercase: false,
+    			lowercase: false
+			}));
+		} else {
+			console.warn("Cleave is missing. Please download from https://github.com/nosir/cleave.js/ and load the script in the HTML head section!");
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+	.vue-form-generator .field-cleave {}
+</style>
