diff --git a/build/webpack.dev.config.js b/build/webpack.dev.config.js
index 00d2bf9c..dfced552 100644
--- a/build/webpack.dev.config.js
+++ b/build/webpack.dev.config.js
@@ -44,12 +44,13 @@ module.exports = {
 		contentBase: [path.resolve("dev/projects")]
 	},
 	entry: {
-		full: path.resolve("dev", "projects", "full", "main.js"),
 		basic: path.resolve("dev", "projects", "basic", "main.js"),
-		mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
+		checklist: path.resolve("dev", "projects", "checklist", "main.js"),
+		custom: path.resolve("dev", "projects", "custom", "main.js"),
+		full: path.resolve("dev", "projects", "full", "main.js"),
 		grouping: path.resolve("dev", "projects", "grouping", "main.js"),
+		mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
 		multi: path.resolve("dev", "projects", "multi", "main.js"),
-		checklist: path.resolve("dev", "projects", "checklist", "main.js"),
 		picker: path.resolve("dev", "projects", "picker", "main.js")
 	},
 
diff --git a/dev/projects/custom/app.vue b/dev/projects/custom/app.vue
new file mode 100644
index 00000000..d08fef52
--- /dev/null
+++ b/dev/projects/custom/app.vue
@@ -0,0 +1,251 @@
+<template>
+	<div class="container">
+		<h1>Custom label, help, hint and errors (with grouping)</h1>
+		<div class="row">
+			<div class="col-sm-12">
+				<vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="section">
+
+					<template slot="label" slot-scope="{ field, getValueFromOption }">
+						<h3><i :class="`fa fa-${getIcon(field, getValueFromOption)}`"></i> {{ field.label }}</h3>
+					</template>
+
+					<template slot="help" slot-scope="{ field }">
+						<span v-if='field.help' class="help">
+							<span @click.prevent="testClick(field.help, $event)">Need help</span>
+							<i class="fa fa-question"></i>
+							<vue-markdown class="helpText" :source="field.help"></vue-markdown>
+						</span>
+					</template>
+
+					<template slot="hint" slot-scope="{ field, getValueFromOption }">
+						<div class="hint hint--info">
+							<i class="fa fa-info-circle"></i>
+							<span v-html="getValueFromOption(field, 'hint', undefined)"></span>
+						</div>
+					</template>
+
+					<template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
+						<span>Custom errors</span>
+						<table class="errors help-block">
+							<tbody>
+								<thead>
+									<tr>
+										<th scope="col" id="">Index</th>
+										<th scope="col" id="">Error</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr v-for="(error, index) in errors" :key="index">
+										<td>{{index}}</td>
+										<td v-html="error"></td>
+									</tr>
+								</tbody>
+							</tbody>
+						</table>
+					</template>
+
+				</vue-form-generator>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-sm-12">
+				<pre v-if="model" v-html="prettyModel"></pre>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixinUtils from "../../mixins/utils.js";
+import VueMarkdown from "vue-markdown";
+
+export default {
+	mixins: [mixinUtils],
+	components: {
+		VueMarkdown
+	},
+	data() {
+		return {
+			model: {
+				name: "Brian Blessed",
+				email: "brian@hawkman.mongo",
+				others: {
+					more: "",
+					things: 2
+				},
+				single: "blah",
+				color: ""
+			},
+
+			schema: {
+				fields: [
+					{
+						type: "group",
+						legend: "Contact Details",
+						tag: "div",
+						fields: [
+							{
+								type: "input",
+								model: "name",
+								label: "Name",
+								fieldOptions: {
+									inputType: "text"
+								},
+								required: true,
+								validator: ["required"]
+							},
+							{
+								type: "group",
+								legend: "Subgroup",
+								styleClasses: "subgroup",
+								tag: "fieldset",
+								fields: [
+									{
+										type: "input",
+										model: "color",
+										label: "Some color",
+										fieldOptions: {
+											inputType: "color"
+										},
+										required: true,
+										validator: ["required"]
+									}
+								]
+							},
+							{
+								type: "input",
+								model: "email",
+								label: "Email",
+								hint: "We will not share your email with third-party",
+								fieldOptions: {
+									inputType: "email"
+								}
+							}
+						]
+					},
+					{
+						type: "input",
+						model: "single",
+						label: "Single field (without group)",
+						fieldOptions: {
+							inputType: "text"
+						},
+						required: true,
+						validator: ["string"]
+					},
+					{
+						type: "group",
+						legend: "Other Details",
+						fields: [
+							{
+								type: "input",
+								model: "others.more",
+								label: "More",
+								help: `
+Welcome to this *custom help*
+
+	some code example
+
+
+You need a modern browser to fill this field in the best condition.
+* test1
+* test2
+
+https://google.com/
+
+# Markdown !
+								`,
+								fieldOptions: {
+									inputType: "date"
+								}
+							},
+							{
+								type: "input",
+								model: "others.things",
+								label: "Things",
+								fieldOptions: {
+									inputType: "number"
+								}
+							}
+						]
+					}
+				]
+			},
+
+			formOptions: {
+				validateAfterLoad: true,
+				validateAfterChanged: true,
+				fieldIdPrefix: "frm1-"
+			}
+		};
+	},
+
+	methods: {
+		testClick(helpText, event) {
+			console.log(helpText, event);
+		},
+		getIcon(field, getValueFromOption) {
+			let fieldType = getValueFromOption(field, "type");
+			let fieldOptions = getValueFromOption(field, "fieldOptions");
+
+			if (fieldType === "input") {
+				switch (fieldOptions.inputType) {
+					case "email":
+						return "at";
+					case "number":
+						return "calculator";
+					case "date":
+						return "calendar-alt";
+					case "color":
+						return "palette";
+					default:
+						return "file-alt";
+				}
+			}
+		}
+	},
+
+	created() {
+		window.app = this;
+	}
+};
+</script>
+
+<style lang="scss">
+@import "../../style.scss";
+.field-group {
+	border: 2px solid #bbb;
+	padding: 8px;
+	border-radius: 4px;
+}
+.subgroup {
+	border-color: goldenrod;
+	legend {
+		color: #00268d;
+	}
+}
+.hint {
+	&--info {
+		color: #339af0;
+	}
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+thead th {
+	background-color: #efdddd;
+	border: solid 1px #eedddd;
+	color: #6b3333;
+	padding: 10px;
+	text-align: left;
+	text-shadow: 1px 1px 1px #fff;
+}
+tbody td {
+	border: solid 1px #eedddd;
+	color: #333;
+	padding: 10px;
+	text-shadow: 1px 1px 1px #fff;
+}
+</style>
diff --git a/dev/projects/custom/index.html b/dev/projects/custom/index.html
new file mode 100644
index 00000000..22dec0f7
--- /dev/null
+++ b/dev/projects/custom/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title>vue-form-generator multiple forms demo</title>
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+	      crossorigin="anonymous">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
+</head>
+
+<body>
+	<div class="container-fluid"></div>
+	<div id="app"></div>
+	<script src="/custom.js"></script>
+</body>
+
+</html>
diff --git a/dev/projects/custom/main.js b/dev/projects/custom/main.js
new file mode 100644
index 00000000..b63543ee
--- /dev/null
+++ b/dev/projects/custom/main.js
@@ -0,0 +1,9 @@
+import Vue from "vue";
+import VueFormGenerator from "../../../src";
+Vue.use(VueFormGenerator);
+
+import App from "./app.vue";
+
+new Vue({
+	...App
+}).$mount("#app");
diff --git a/dev/projects/full/app.vue b/dev/projects/full/app.vue
index cbc5b439..a7a041f0 100644
--- a/dev/projects/full/app.vue
+++ b/dev/projects/full/app.vue
@@ -22,7 +22,9 @@
 						<strong>{{ item.error }}</strong>
 					</div>
 				</div>
-				<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated"></vue-form-generator>
+				<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated">
+
+				</vue-form-generator>
 			</div>
 			<div class="col-md-6">
 				<pre v-if="model" v-html="prettyModel"></pre>
diff --git a/dev/projects/full/schema.js b/dev/projects/full/schema.js
index 3ba4aa64..c104c61f 100644
--- a/dev/projects/full/schema.js
+++ b/dev/projects/full/schema.js
@@ -43,7 +43,7 @@ export default {
 			required: true,
 			help: "First name of user",
 			validator: validators.string,
-			fieldClasses: "half-width",
+			styleClasses: "half-width col-xs-12 col-sm-6",
 			fieldOptions: {
 				inputType: "text"
 			},
@@ -61,7 +61,7 @@ export default {
 			placeholder: "User's last name",
 			featured: true,
 			required: true,
-			fieldClasses: "half-width",
+			styleClasses: "half-width col-xs-12 col-sm-6",
 			fieldOptions: {
 				inputType: "text"
 			},
diff --git a/package-lock.json b/package-lock.json
index f7f16a62..f4b3d0d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3404,7 +3404,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -3662,7 +3662,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -3842,7 +3842,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -4798,6 +4798,12 @@
         "tapable": "0.2.8"
       }
     },
+    "entities": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
+      "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
+      "dev": true
+    },
     "eonasdan-bootstrap-datetimepicker": {
       "version": "4.17.47",
       "resolved": "https://registry.npmjs.org/eonasdan-bootstrap-datetimepicker/-/eonasdan-bootstrap-datetimepicker-4.17.47.tgz",
@@ -6674,7 +6680,8 @@
         "jsbn": {
           "version": "0.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "json-schema": {
           "version": "0.2.3",
@@ -7378,7 +7385,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -7547,7 +7554,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -7955,6 +7962,12 @@
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
       "dev": true
     },
+    "highlight.js": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
+      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=",
+      "dev": true
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -9514,6 +9527,15 @@
       "integrity": "sha512-mJVp13Ix6gFo3SBAy9U/kL+oeZqzlYYYLQBwXVBlVzIsZwBqGREnOro24oC/8s8aox+rJhtZ2DiQof++IrkA+g==",
       "dev": true
     },
+    "katex": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.6.0.tgz",
+      "integrity": "sha1-EkGOCRIcBckgQbazuftrqyE8tvM=",
+      "dev": true,
+      "requires": {
+        "match-at": "0.1.1"
+      }
+    },
     "killable": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.0.tgz",
@@ -9575,6 +9597,15 @@
         "type-check": "0.3.2"
       }
     },
+    "linkify-it": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-1.2.4.tgz",
+      "integrity": "sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=",
+      "dev": true,
+      "requires": {
+        "uc.micro": "1.0.5"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -10080,6 +10111,106 @@
         "object-visit": "1.0.1"
       }
     },
+    "markdown-it": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-6.1.1.tgz",
+      "integrity": "sha1-ztA39Ec+6fUVOsQU933IPJG6knw=",
+      "dev": true,
+      "requires": {
+        "argparse": "1.0.9",
+        "entities": "1.1.1",
+        "linkify-it": "1.2.4",
+        "mdurl": "1.0.1",
+        "uc.micro": "1.0.5"
+      }
+    },
+    "markdown-it-abbr": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-it-abbr/-/markdown-it-abbr-1.0.4.tgz",
+      "integrity": "sha1-1mtTZFIcuz3Yqlna37ovtoZcj9g=",
+      "dev": true
+    },
+    "markdown-it-deflist": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-deflist/-/markdown-it-deflist-2.0.3.tgz",
+      "integrity": "sha512-/BNZ8ksW42bflm1qQLnRI09oqU2847Z7MVavrR0MORyKLtiUYOMpwtlAfMSZAQU9UCvaUZMpgVAqoS3vpToJxw==",
+      "dev": true
+    },
+    "markdown-it-emoji": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz",
+      "integrity": "sha1-m+4OmpkKljupbfaYDE/dsF37Tcw=",
+      "dev": true
+    },
+    "markdown-it-footnote": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-2.0.0.tgz",
+      "integrity": "sha1-FOnE9o/xLPNU+jZa43gnboEEypQ=",
+      "dev": true
+    },
+    "markdown-it-ins": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-ins/-/markdown-it-ins-2.0.0.tgz",
+      "integrity": "sha1-papqMPHi9x6Ul1Z8/f9A8f3mdIM=",
+      "dev": true
+    },
+    "markdown-it-katex": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-katex/-/markdown-it-katex-2.0.3.tgz",
+      "integrity": "sha1-17hqGuoLnWSW+rTnkZoY/e9YnDk=",
+      "dev": true,
+      "requires": {
+        "katex": "0.6.0"
+      }
+    },
+    "markdown-it-mark": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-2.0.0.tgz",
+      "integrity": "sha1-RqGqlHEFrtgYiXjgoBYXnkBPQsc=",
+      "dev": true
+    },
+    "markdown-it-sub": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz",
+      "integrity": "sha1-N1/WAm6ufdywEkl/ZBEZXqHjr+g=",
+      "dev": true
+    },
+    "markdown-it-sup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz",
+      "integrity": "sha1-y5yf+RpSVawI8/09YyhuFd8KH8M=",
+      "dev": true
+    },
+    "markdown-it-task-lists": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
+      "integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==",
+      "dev": true
+    },
+    "markdown-it-toc-and-anchor": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/markdown-it-toc-and-anchor/-/markdown-it-toc-and-anchor-4.1.2.tgz",
+      "integrity": "sha1-snH2lKcL9xnmtygFbXvZMdNkIU0=",
+      "dev": true,
+      "requires": {
+        "clone": "2.1.2",
+        "uslug": "1.0.4"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        }
+      }
+    },
+    "match-at": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/match-at/-/match-at-0.1.1.tgz",
+      "integrity": "sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q==",
+      "dev": true
+    },
     "matched": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/matched/-/matched-0.4.4.tgz",
@@ -10177,6 +10308,12 @@
         "inherits": "2.0.3"
       }
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -17849,6 +17986,12 @@
         }
       }
     },
+    "uc.micro": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
+      "integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg==",
+      "dev": true
+    },
     "uglify-js": {
       "version": "2.8.29",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
@@ -17947,6 +18090,12 @@
       "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=",
       "dev": true
     },
+    "unorm": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unorm/-/unorm-1.4.1.tgz",
+      "integrity": "sha1-NkIA1fE2RsqLzURJAnEzVhR5IwA=",
+      "dev": true
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -18161,6 +18310,15 @@
         }
       }
     },
+    "uslug": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/uslug/-/uslug-1.0.4.tgz",
+      "integrity": "sha1-uaIvCRTgqGFAYz2swwLl9PpFBnc=",
+      "dev": true,
+      "requires": {
+        "unorm": "1.4.1"
+      }
+    },
     "util": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
@@ -18308,6 +18466,27 @@
         "vue-template-es2015-compiler": "1.6.0"
       }
     },
+    "vue-markdown": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/vue-markdown/-/vue-markdown-2.2.4.tgz",
+      "integrity": "sha512-hoTX/W1UIdHZrp/b0vpHSsJXAEfWsafaQLgtE2VX4gY8O/C3L2Gabqu95gyG429rL4ML1SwGv+xsPABX7yfFIQ==",
+      "dev": true,
+      "requires": {
+        "highlight.js": "9.12.0",
+        "markdown-it": "6.1.1",
+        "markdown-it-abbr": "1.0.4",
+        "markdown-it-deflist": "2.0.3",
+        "markdown-it-emoji": "1.4.0",
+        "markdown-it-footnote": "2.0.0",
+        "markdown-it-ins": "2.0.0",
+        "markdown-it-katex": "2.0.3",
+        "markdown-it-mark": "2.0.0",
+        "markdown-it-sub": "1.0.0",
+        "markdown-it-sup": "1.0.0",
+        "markdown-it-task-lists": "2.1.1",
+        "markdown-it-toc-and-anchor": "4.1.2"
+      }
+    },
     "vue-multiselect": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.0.tgz",
diff --git a/package.json b/package.json
index 95988d5b..b43b9b7b 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
 		"url-loader": "1.1.1",
 		"vue": "2.5.17",
 		"vue-loader": "14.2.2",
+		"vue-markdown": "^2.2.4",
 		"vue-multiselect": "2.1.0",
 		"vue-style-loader": "4.1.2",
 		"vue-template-compiler": "2.5.17",
diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
index 84a32842..b9d0afd5 100644
--- a/src/fields/abstractField.js
+++ b/src/fields/abstractField.js
@@ -46,6 +46,7 @@ export default {
 		const fieldUID = uniqueId(this.fieldID + "_");
 		return {
 			fieldUID,
+			touched: false,
 			errors: [],
 			debouncedValidateFunc: null,
 			debouncedFormatFunction: null
@@ -75,6 +76,8 @@ export default {
 			},
 
 			set(newValue) {
+				this.touch();
+
 				let oldValue = this.value;
 				newValue = this.formatValueToModel(newValue);
 
@@ -133,6 +136,8 @@ export default {
 			}
 		},
 		validate() {
+			this.touch();
+
 			this.clearValidationErrors();
 			let validateAsync = objGet(this.formOptions, "validateAsync", false);
 
@@ -277,6 +282,13 @@ export default {
 
 		formatValueToModel(value) {
 			return value;
+		},
+
+		touch() {
+			if (!this.touched) {
+				this.touched = true;
+				this.$emit("field-touched");
+			}
 		}
 	},
 	created() {
diff --git a/src/formElement.vue b/src/formElement.vue
index 600c5f46..4bec410d 100644
--- a/src/formElement.vue
+++ b/src/formElement.vue
@@ -1,25 +1,24 @@
 <template>
 	<div class="form-element" :class="[fieldRowClasses]">
 		<label v-if="fieldTypeHasLabel" :for="fieldID" :class="field.labelClasses">
-			<span v-html="field.label"></span>
-			<span v-if='field.help' class="help">
-				<i class="icon"></i>
-				<div class="helpText" v-html='field.help'></div>
-			</span>
+			<slot name="label" :field="field" :getValueFromOption="getValueFromOption"></slot>
+			<slot name="help" :field="field" :getValueFromOption="getValueFromOption"></slot>
 		</label>
 
 		<div class="field-wrap">
-			<component ref="child" :is="fieldType" :model="model" :schema="field" :formOptions="options" :eventBus="eventBus" :fieldID="fieldID" @errors-updated="onChildValidated"></component>
+			<component ref="child" :is="fieldType" :model="model" :schema="field" :formOptions="options" :eventBus="eventBus" :fieldID="fieldID" @field-touched="onFieldTouched" @errors-updated="onChildValidated"></component>
 			<div v-if="buttonsAreVisible" class="buttons">
 				<button v-for="(btn, index) in field.buttons" @click="buttonClickHandler(btn, field, $event)" :class="btn.classes" :key="index" v-text="btn.label"></button>
 			</div>
 		</div>
 
-		<div v-if="fieldHasHint" class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
+		<template v-if="fieldHasHint">
+			<slot name="hint" :field="field" :getValueFromOption="getValueFromOption"></slot>
+		</template>
 
-		<div v-if="childErrors.length > 0" class="errors help-block">
-			<span v-for="(error, index) in childErrors" :key="index" v-html="error"></span>
-		</div>
+		<template v-if="fieldHasErrors">
+			<slot name="errors" :childErrors="childErrors" :field="field" :getValueFromOption="getValueFromOption" ></slot>
+		</template>
 	</div>
 </template>
 <script>
@@ -52,7 +51,8 @@ export default {
 	},
 	data() {
 		return {
-			childErrors: []
+			childErrors: [],
+			childTouched: false
 		};
 	},
 	computed: {
@@ -88,11 +88,14 @@ export default {
 		fieldHasHint() {
 			return !isNil(this.field.hint);
 		},
+		fieldHasErrors() {
+			return this.childErrors.length > 0;
+		},
 		fieldRowClasses() {
-			const hasErrors = this.childErrors.length > 0;
 			let baseClasses = {
-				[objGet(this.options, "validationErrorClass", "error")]: hasErrors,
-				[objGet(this.options, "validationSuccessClass", "valid")]: !hasErrors,
+				[objGet(this.options, "validationErrorClass", "error")]: this.fieldHasErrors,
+				[objGet(this.options, "validationSuccessClass", "valid")]: !this.fieldHasErrors && this.childTouched,
+				[objGet(this.options, "validationCleanClass", "clean")]: !this.fieldHasErrors && !this.childTouched,
 				disabled: this.getValueFromOption(this.field, "disabled"),
 				readonly: this.getValueFromOption(this.field, "readonly"),
 				featured: this.getValueFromOption(this.field, "featured"),
@@ -127,6 +130,9 @@ export default {
 		buttonClickHandler(btn, field, event) {
 			return btn.onclick.call(this, this.model, field, event, this);
 		},
+		onFieldTouched() {
+			this.childTouched = true;
+		},
 		onChildValidated(errors) {
 			this.childErrors = errors;
 		}
@@ -135,11 +141,13 @@ export default {
 </script>
 <style lang="scss">
 $errorColor: #f00;
-
+.form-group:not([class*=" col-"]) {
+	width: 100%;
+}
 .form-element {
 	display: inline-block;
 	vertical-align: top;
-	width: 100%;
+	// width: 100%;
 	// margin: 0.5rem 0.26rem;
 	margin-bottom: 1rem;
 
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index fe84f12a..f8e10fb4 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -2,7 +2,42 @@
 	<div class="vue-form-generator" v-if='schema != null'>
 		<div v-text="totalNumberOfFields"></div>
 		<div v-html="errors"></div>
-		<form-group :tag="tag" :fields="fields" :model="model" :options="options" :errors="errors" :eventBus="eventBus"></form-group>
+		<form-group :tag="tag" :fields="fields" :model="model" :options="options" :errors="errors" :eventBus="eventBus">
+			<template slot="element" slot-scope="slotProps">
+				<form-element :field="slotProps.field" :model="slotProps.model" :options="slotProps.options" :errors="slotProps.errors" :eventBus="eventBus">
+
+					<template slot="label" slot-scope="{ field, getValueFromOption }">
+						<slot name="label" :field="field" :getValueFromOption="getValueFromOption">
+							<span v-html="field.label"></span>
+						</slot>
+					</template>
+
+					<template slot="help" slot-scope="{ field, getValueFromOption }">
+						<slot name="help" :field="field" :getValueFromOption="getValueFromOption">
+							<span v-if='field.help' class="help">
+								<i class="icon"></i>
+								<div class="helpText" v-html='field.help'></div>
+							</span>
+						</slot>
+					</template>
+
+					<template slot="hint" slot-scope="{ field, getValueFromOption }">
+						<slot name="hint" :field="field" :getValueFromOption="getValueFromOption">
+							<div class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
+						</slot>
+					</template>
+
+					<template slot="errors" slot-scope="{ childErrors, field, getValueFromOption }">
+						<slot name="errors" :errors="childErrors" :field="field" :getValueFromOption="getValueFromOption">
+							<div class="errors help-block">
+								<span v-for="(error, index) in childErrors" :key="index" v-html="error"></span>
+							</div>
+						</slot>
+					</template>
+
+				</form-element>
+			</template>
+		</form-group>
 	</div>
 </template>
 
@@ -10,10 +45,11 @@
 import Vue from "vue";
 import { get as objGet, isArray } from "lodash";
 import formGroup from "./formGroup.vue";
+import formElement from "./formElement.vue";
 
 export default {
 	name: "formGenerator",
-	components: { formGroup },
+	components: { formGroup, formElement },
 	props: {
 		schema: {
 			type: Object
diff --git a/src/formGroup.vue b/src/formGroup.vue
index d3fb5a88..26d804b5 100644
--- a/src/formGroup.vue
+++ b/src/formGroup.vue
@@ -1,24 +1,29 @@
 <template>
 	<fieldset v-if="fields" :is="tag" :class="[groupRowClasses, validationClass]" ref="group">
+
 		<legend v-if="groupLegend">{{ groupLegend }}</legend>
 		<template v-for="(field, index) in fields">
-			<template v-if="field.type === 'group'">
-				<form-group v-if="fieldVisible(field)" :fields="field.fields" :group="field" :tag="getGroupTag(field)" :model="model" :options="options" :errors="errors" :eventBus="eventBus" :key="index"></form-group>
-			</template>
-			<template v-else>
-				<form-element v-if="fieldVisible(field)" :field="field" :model="model" :options="options" :errors="errors" :eventBus="eventBus" :key="index"></form-element>
+			<template v-if="fieldVisible(field)">
+				<template v-if="field.type === 'group'">
+					<form-group :fields="field.fields" :group="field" :tag="getGroupTag(field)" :model="model" :options="options" :errors="errors" :eventBus="eventBus" :key="index">
+						<template slot="element" slot-scope="slotProps">
+							<slot name="element" :field="slotProps.field" :model="slotProps.model" :options="slotProps.options" :errors="slotProps.errors" :eventBus="slotProps.eventBus"></slot>
+						</template>
+					</form-group>
+				</template>
+				<template v-else>
+					<slot name="element" :field="field" :model="model" :options="options" :errors="errors" :eventBus="eventBus"></slot>
+				</template>
 			</template>
 		</template>
 	</fieldset>
 </template>
 <script>
-import formElement from "./formElement.vue";
 import formMixin from "./formMixin.js";
 import { get as objGet, isFunction, isNil } from "lodash";
 
 export default {
 	name: "form-group",
-	components: { formElement },
 	mixins: [formMixin],
 	props: {
 		fields: { type: Array },
diff --git a/test/unit/specs/VueFormGenerator.spec.js b/test/unit/specs/VueFormGenerator.spec.js
index 2c726e11..d5ec90bd 100644
--- a/test/unit/specs/VueFormGenerator.spec.js
+++ b/test/unit/specs/VueFormGenerator.spec.js
@@ -1089,4 +1089,85 @@ describe("VueFormGenerator.vue", () => {
 			});
 		});
 	});
+
+	describe("check custom slot", () => {
+		let schema = {
+			fields: [
+				{
+					type: "input",
+					fieldOptions: {
+						inputType: "text",
+						min: 3
+					},
+					label: "My label",
+					help: "My help",
+					hint: "My hint",
+					model: "name",
+					validator: ["string"]
+				}
+			]
+		};
+		let model = { name: "B" };
+		let formOptions = { validateAfterLoad: true };
+		let formGenerator;
+		let form;
+
+		beforeEach(() => {
+			createFormGenerator(
+				{ schema, model, formOptions },
+				{},
+				`<vue-form-generator :schema="schema" ref="form" tag="section">
+					<template slot="label" slot-scope="{ field, getValueFromOption }">
+						<span class="custom-class--label">Custom label</span>
+						<div v-html="getValueFromOption(field, 'label', undefined)"></div>
+					</template>
+
+					<template slot="help" slot-scope="{ field, getValueFromOption }">
+						<span class="custom-class--help">Custom help</span>
+						<div v-html="getValueFromOption(field, 'help', undefined)"></div>
+					</template>
+
+					<template slot="hint" slot-scope="{ field, getValueFromOption }">
+						<span class="custom-class--hint">Custom hint</span>
+						<div v-html="getValueFromOption(field, 'hint', undefined)"></div>
+					</template>
+
+					<template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
+						<span class="custom-class--errors">Custom errors</span>
+						<div v-for="(error, index) in errors" :key="index">
+							{{index}}
+						</div>
+					</template>
+				</vue-form-generator>`
+			);
+			formGenerator = wrapper.find({ name: "formGenerator" });
+			form = formGenerator.vm;
+		});
+
+		it("should have a custom label", () => {
+			expect(formGenerator.find(".custom-class--label").exists()).to.be.true;
+		});
+
+		it("should have a custom help", () => {
+			expect(formGenerator.find(".custom-class--help").exists()).to.be.true;
+		});
+
+		it("should have a custom hint", () => {
+			expect(formGenerator.find(".custom-class--hint").exists()).to.be.true;
+		});
+		// TODO: fix error not showing
+		it.skip("should have a custom error", (done) => {
+			Vue.config.errorHandler = done;
+
+			form.validate().then(
+				() => {
+					Vue.nextTick(() => {
+						expect(formGenerator.find(".custom-class--errors").exists()).to.be.true;
+						done();
+					});
+				},
+				() => {}
+			);
+		});
+	});
 });