diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
index e2ef8d5c..0600cd92 100644
--- a/src/fields/abstractField.js
+++ b/src/fields/abstractField.js
@@ -53,7 +53,7 @@ export default {
 				if (isFunction(this.schema.set)) {
 					this.schema.set(this.model, newValue);
 					changed = true;
-					
+
 				} else if (this.schema.model) {
 					this.setModelValueByPath(this.schema.model, newValue);
 					changed = true;
@@ -68,7 +68,7 @@ export default {
 
 					if (this.$parent.options && this.$parent.options.validateAfterChanged === true){
 						this.validate();
-					}					
+					}
 				}
 			}
 		}
@@ -133,7 +133,7 @@ export default {
 		setModelValueByPath(path, value) {
 			// convert array indexes to properties
 			let s = path.replace(/\[(\w+)\]/g, ".$1");
-			
+
 			// strip a leading dot
 			s = s.replace(/^\./, "");
 
@@ -157,9 +157,36 @@ export default {
 					this.$root.$set(o, k, value);
 					return;
 				}
-				
+
 				++i;
 			}
+		},
+
+		getFieldID(schema) {
+			// Try to get a reasonable default id from the schema,
+			// then slugify it.
+			if (typeof schema.id !== "undefined") {
+				// If an ID's been explicitly set, use it unchanged
+				return schema.id;
+			} else {
+				// Return the slugified version of either:
+				return (schema.inputName || schema.label || schema.model)
+				// NB: This is a very simple, conservative, slugify function,
+				// avoiding extra dependencies.
+				.toString()
+				.trim()
+				.toLowerCase()
+				// Spaces & underscores to dashes
+				.replace(/ |_/g, "-")
+				// Multiple dashes to one
+				.replace(/-{2,}/g, "-")
+				// Remove leading & trailing dashes
+				.replace(/^-+|-+$/g, "")
+				// Remove anything that isn't a (English/ASCII) letter, number or dash.
+				.replace(/([^a-zA-Z0-9-]+)/g, "")
+				;
+			}
 		}
+
 	}
 };
diff --git a/src/fields/core/fieldInput.vue b/src/fields/core/fieldInput.vue
index 42428ade..c6882162 100644
--- a/src/fields/core/fieldInput.vue
+++ b/src/fields/core/fieldInput.vue
@@ -1,7 +1,8 @@
 <template lang="pug">
 .wrapper
 	input.form-control(
-		:type="schema.inputType", 
+		:id="getFieldID(schema)",
+		:type="schema.inputType",
 		:value="value",
 		@input="value = $event.target.value",
 		@change="onChange",
@@ -74,12 +75,12 @@
 						return Number(value);
 					}
 				}
-				
+
 				return value;
 			}
 		}
 	};
-	
+
 </script>
 
 <style lang="sass">
diff --git a/src/fields/core/fieldLabel.vue b/src/fields/core/fieldLabel.vue
index 3901df97..99616343 100644
--- a/src/fields/core/fieldLabel.vue
+++ b/src/fields/core/fieldLabel.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	span {{ value }}
+	span(:id="getFieldID(schema)") {{ value }}
 </template>
 
 <script>
diff --git a/src/fields/core/fieldSelect.vue b/src/fields/core/fieldSelect.vue
index 12f93d67..3288a1b4 100644
--- a/src/fields/core/fieldSelect.vue
+++ b/src/fields/core/fieldSelect.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName")
+	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
 		option(:disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
 		option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
 </template>
diff --git a/src/fields/core/fieldTextArea.vue b/src/fields/core/fieldTextArea.vue
index 724104a6..e61354f3 100644
--- a/src/fields/core/fieldTextArea.vue
+++ b/src/fields/core/fieldTextArea.vue
@@ -1,5 +1,14 @@
 <template lang="pug">
-	textarea.form-control(v-model="value", :disabled="disabled", :maxlength="schema.max", :minlength="schema.min", :placeholder="schema.placeholder", :readonly="schema.readonly", :rows="schema.rows || 2", :name="schema.inputName")
+	textarea.form-control(
+		v-model="value",
+		:id="getFieldID(schema)",
+		:disabled="disabled",
+		:maxlength="schema.max",
+		:minlength="schema.min",
+		:placeholder="schema.placeholder",
+		:readonly="schema.readonly",
+		:rows="schema.rows || 2",
+		:name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldCleave.vue b/src/fields/optional/fieldCleave.vue
index dd50d055..d472c855 100644
--- a/src/fields/optional/fieldCleave.vue
+++ b/src/fields/optional/fieldCleave.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldDateTimePicker.vue b/src/fields/optional/fieldDateTimePicker.vue
index 2ee6c34e..8f54b407 100644
--- a/src/fields/optional/fieldDateTimePicker.vue
+++ b/src/fields/optional/fieldDateTimePicker.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 	.input-group.date
-		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
+		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 		span.input-group-addon
 			span.glyphicon.glyphicon-calendar
 </template>
@@ -19,7 +19,7 @@
 		methods: {
 
 			getDateFormat() {
-				if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format) 
+				if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format)
 					return this.schema.dateTimePickerOptions.format;
 				else
 					return inputFormat;
@@ -47,7 +47,7 @@
 			if (window.$ && window.$.fn.datetimepicker){
 				$(this.$el).data("DateTimePicker").destroy();
 			}
-		}		
+		}
 	};
 </script>
 
diff --git a/src/fields/optional/fieldGoogleAddress.vue b/src/fields/optional/fieldGoogleAddress.vue
index d23ade58..5a1f8620 100644
--- a/src/fields/optional/fieldGoogleAddress.vue
+++ b/src/fields/optional/fieldGoogleAddress.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName",  debounce="500", @focus="geolocate()")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName",  debounce="500", @focus="geolocate()", :id="getFieldID(schema)")
 </template>
 
 <script>
@@ -59,7 +59,7 @@
 				if (place) {
 
 					this.value = place.formatted_address;
-					
+
 					let data  = {};
 					if (place.address_components !== undefined) {
 						for (let i = 0; i < place.address_components.length; i++) {
@@ -70,12 +70,12 @@
 						}
 
 					}
-					
+
 					// Call event in schema
 					if (isFunction(this.schema.onPlaceChanged))
 						this.schema.onPlaceChanged(this.value, data, place, this.model, this.schema);
 				}
-			},	
+			},
 
 			/**
 			 * Get the user location.
diff --git a/src/fields/optional/fieldMasked.vue b/src/fields/optional/fieldMasked.vue
index 88c3826c..299ec39c 100644
--- a/src/fields/optional/fieldMasked.vue
+++ b/src/fields/optional/fieldMasked.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldSpectrum.vue b/src/fields/optional/fieldSpectrum.vue
index 51012e0a..abb13231 100644
--- a/src/fields/optional/fieldSpectrum.vue
+++ b/src/fields/optional/fieldSpectrum.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
+	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldSwitch.vue b/src/fields/optional/fieldSwitch.vue
index 096af1e0..3702a3a5 100644
--- a/src/fields/optional/fieldSwitch.vue
+++ b/src/fields/optional/fieldSwitch.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 	label
-		input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
-		span.label(:data-on="schema.textOn || 'On'", :data-off="schema.textOff || 'Off'")
+		input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
+		span.label(:data-on="schema.textOn || 'On'", :data-off="schema.textOff || 'Off'", :for="getFieldID(schema)")
 		span.handle
 </template>
 
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index 75869bc6..cb111129 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -3,7 +3,7 @@ div
 	fieldset.vue-form-generator(v-if='schema != null', :is='tag')
 		template(v-for='field in fields')
 			.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
-				label
+				label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
 					| {{ field.label }}
 					span.help(v-if='field.help')
 						i.icon
@@ -20,12 +20,13 @@ div
 <script>
 	// import Vue from "vue";
 	import {each, isFunction, isNil, isArray, isString} from "lodash";
+	import getFieldID from "./fields/abstractField";
 
 	// Load all fields from '../fields' folder
 	let fieldComponents = {};
 
 	let coreFields = require.context("./fields/core", false, /^\.\/field([\w-_]+)\.vue$/);
-				
+
 	each(coreFields.keys(), (key) => {
 		let compName = key.replace(/^\.\//, "").replace(/\.vue/, "");
 		fieldComponents[compName] = coreFields(key);
@@ -33,7 +34,7 @@ div
 
 	if (process.env.FULL_BUNDLE) {  // eslint-disable-line
 		let Fields = require.context("./fields/optional", false, /^\.\/field([\w-_]+)\.vue$/);
-				
+
 		each(Fields.keys(), (key) => {
 			let compName = key.replace(/^\.\//, "").replace(/\.vue/, "");
 			fieldComponents[compName] = Fields(key);
@@ -44,7 +45,9 @@ div
 
 	export default {
 		components: fieldComponents,
-		
+
+		mixins: [ getFieldID ],
+
 		props: {
 			schema: Object,
 
@@ -80,7 +83,7 @@ div
 				}
 			}
 		},
-		
+
 		data () {
 			return {
 				errors: [] // Validation errors
@@ -131,16 +134,16 @@ div
 				}
 			});
 		},
-	
+
 		methods: {
 			// Get style classes of field
 			getFieldRowClasses(field) {
 				const hasErrors = this.fieldErrors(field).length > 0;
 				let baseClasses = {
 					error: hasErrors,
-					disabled: this.fieldDisabled(field), 
-					readonly: this.fieldReadonly(field), 
-					featured: this.fieldFeatured(field), 
+					disabled: this.fieldDisabled(field),
+					readonly: this.fieldReadonly(field),
+					featured: this.fieldFeatured(field),
 					required: this.fieldRequired(field)
 				};
 
@@ -172,6 +175,26 @@ div
 				return "field-" + fieldSchema.type;
 			},
 
+			// Should field type have a label?
+			fieldTypeHasLabel(field) {
+				let relevantType = "";
+				if (field.type === "input") {
+					relevantType = field.inputType;
+				} else {
+					relevantType = field.type;
+				}
+
+				switch (relevantType) {
+				case "button":
+				case "image":
+				case "submit":
+				case "reset":
+					return false;
+				default:
+					return true;
+				}
+			},
+
 			// Get disabled attr of field
 			fieldDisabled(field) {
 				if (isFunction(field.disabled))
@@ -203,7 +226,7 @@ div
 					return true;
 
 				return field.visible;
-			},		
+			},
 
 			// Get readonly prop of field
 			fieldReadonly(field) {
@@ -214,7 +237,7 @@ div
 					return false;
 
 				return field.readonly;
-			},		
+			},
 
 			// Get featured prop of field
 			fieldFeatured(field) {
@@ -295,25 +318,25 @@ div
 			}
 		}
 	};
-	
+
 </script>
 
 <style lang="sass">
-	
+
 	$errorColor: #F00;
 
 	fieldset.vue-form-generator {
 
 		* {
 			box-sizing: border-box;
-		}		
-		
+		}
+
 		.form-control {
 			// Default Bootstrap .form-control style
 			display: block;
-            &:not([class*=" col-"]){
-                width: 100%;
-            }
+				&:not([class*=" col-"]){
+					width: 100%;
+				}
 			padding: 6px 12px;
 			font-size: 14px;
 			line-height: 1.42857143;
@@ -323,10 +346,10 @@ div
 			border: 1px solid #ccc;
 			border-radius: 4px;
 			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-			transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;	
+			transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 
 		} // .form-control
-		
+
 		span.help {
 			margin-left: 0.3em;
 			position: relative;
@@ -381,7 +404,7 @@ div
 				opacity: 1;
 				pointer-events: auto;
 				transform: translateY(0px);
-			}		
+			}
 
 		} // span.help
 
@@ -393,11 +416,11 @@ div
 				margin-left: 4px;
 			}
 
-			button, input[type=submit] {					
+			button, input[type=submit] {
 				// Default Bootstrap button style
 				display: inline-block;
 				padding: 6px 12px;
-				margin: 0px;					
+				margin: 0px;
 				font-size: 14px;
 				font-weight: normal;
 				line-height: 1.42857143;
@@ -433,11 +456,11 @@ div
 				&:disabled {
 					opacity: 0.6;
 					cursor: not-allowed;
-				}				
+				}
 
 			} // button, input[submit]
 
-		} // .field-wrap		
+		} // .field-wrap
 
 		.hint {
 			font-style: italic;
@@ -459,7 +482,7 @@ div
 			&.featured {
 				> label {
 					font-weight: bold;
-				}			
+				}
 			}
 
 			&.required {
@@ -470,14 +493,14 @@ div
 					position: absolute;
 					padding-left: 0.2em;
 					font-size: 1em;
-				}	
+				}
 			}
 
 			&.disabled {
 				> label {
 					color: #666;
 					font-style: italic;
-				}			
+				}
 			}
 
 			&.error {
@@ -500,11 +523,11 @@ div
 							font-weight: 600;
 					}
 
-				} // .errors	
+				} // .errors
 
 			} // .error
 
 		} // .form-group
 
 	} // fieldset
-</style>
\ No newline at end of file
+</style>
diff --git a/test/unit/specs/VueFormGenerator.spec.js b/test/unit/specs/VueFormGenerator.spec.js
index 964f0e0a..e023a32e 100644
--- a/test/unit/specs/VueFormGenerator.spec.js
+++ b/test/unit/specs/VueFormGenerator.spec.js
@@ -46,7 +46,7 @@ describe("VueFormGenerator.vue", () => {
 			expect(el.getElementsByTagName("fieldset")).to.be.length(1);
 		});
 
-	});	
+	});
 
 	describe("with empty schema and custom tag", () => {
 		let schema = {};
@@ -115,7 +115,7 @@ describe("VueFormGenerator.vue", () => {
 				expect(group.classList.contains("readonly")).to.be.true;
 				done();
 			});
-		});		
+		});
 
 		it("should be disabled class", (done) => {
 			vm.schema.fields[0].disabled = true;
@@ -123,7 +123,7 @@ describe("VueFormGenerator.vue", () => {
 				expect(group.classList.contains("disabled")).to.be.true;
 				done();
 			});
-		});		
+		});
 
 		it("should be required class", (done) => {
 			vm.schema.fields[0].required = true;
@@ -131,7 +131,7 @@ describe("VueFormGenerator.vue", () => {
 				expect(group.classList.contains("required")).to.be.true;
 				done();
 			});
-		});		
+		});
 
 		it("should be error class", (done) => {
 			vm.$refs.form.errors.push({ field: vm.schema.fields[0], error: "Validation error!" });
@@ -139,7 +139,7 @@ describe("VueFormGenerator.vue", () => {
 				expect(group.classList.contains("error")).to.be.true;
 				done();
 			});
-		});		
+		});
 
 		describe("custom validation classes", () => {
 			before(() => {
@@ -174,7 +174,7 @@ describe("VueFormGenerator.vue", () => {
 				expect(group.classList.contains("classA")).to.be.true;
 				done();
 			});
-		});		
+		});
 
 		it("should be add more custom classes", (done) => {
 			Vue.set(vm.schema.fields[0], "styleClasses", [ "classB", "classC" ]);
@@ -183,16 +183,16 @@ describe("VueFormGenerator.vue", () => {
 				expect(group.classList.contains("classC")).to.be.true;
 				done();
 			});
-		});		
+		});
 
-	});	
+	});
 
 	describe("check form row caption cell", () => {
 		let group, label;
 		let schema = {
 			fields: [
 				{
-					type: "input", 
+					type: "input",
 					inputType: "text",
 					label: "Name",
 					model: "name",
@@ -231,7 +231,7 @@ describe("VueFormGenerator.vue", () => {
 		let schema = {
 			fields: [
 				{
-					type: "input", 
+					type: "input",
 					inputType: "text",
 					label: "Name",
 					model: "name",
@@ -278,7 +278,7 @@ describe("VueFormGenerator.vue", () => {
 		let schema = {
 			fields: [
 				{	type: "input", inputType: "text", label: "name", model: "name", multi: false	},
-				{	type: "input", inputType: "text", label: "phone", model: "phone", multi: true	}, 
+				{	type: "input", inputType: "text", label: "phone", model: "phone", multi: true	},
 				{	type: "input", inputType: "text", label: "email", model: "email"	} // multi is undefined
 			]
 		};
@@ -298,12 +298,12 @@ describe("VueFormGenerator.vue", () => {
 	describe("check fieldDisabled with function", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",		
+				{
+					type: "input",
 					inputType: "text",
-					label: "Name", 
-					model: "name", 
-					disabled(model) { return !model.status; }	
+					label: "Name",
+					model: "name",
+					disabled(model) { return !model.status; }
 				}
 			]
 		};
@@ -320,7 +320,7 @@ describe("VueFormGenerator.vue", () => {
 		it("should be enabled the name field", () => {
 			let input = el.getElementsByTagName("input")[0];
 			expect(input.disabled).to.be.false;
-		});	
+		});
 
 		it("should be disabled the name field", (done) => {
 			model.status = false;
@@ -330,18 +330,18 @@ describe("VueFormGenerator.vue", () => {
 
 				done();
 			});
-		});	
+		});
 
 	});
 
 	describe("check fieldDisabled function parameters", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",		
+				{
+					type: "input",
 					inputType: "text",
-					label: "Name", 
-					model: "name", 
+					label: "Name",
+					model: "name",
 					disabled: sinon.spy()
 				}
 			]
@@ -360,18 +360,18 @@ describe("VueFormGenerator.vue", () => {
 			let spy = schema.fields[0].disabled;
 			expect(spy.called).to.be.true;
 			expect(spy.calledWith(model, schema.fields[0], vm.$children[0])).to.be.true;
-		});	
+		});
 
 	});
 
 	describe("check fieldDisabled with const", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",		
+				{
+					type: "input",
 					inputType: "text",
-					label: "Name", 
-					model: "name", 
+					label: "Name",
+					model: "name",
 					disabled: false
 				}
 			]
@@ -386,7 +386,7 @@ describe("VueFormGenerator.vue", () => {
 		it("should be enabled the name field", () => {
 			let input = el.getElementsByTagName("input")[0];
 			expect(input.disabled).to.be.false;
-		});	
+		});
 
 		it("should be disabled the name field", (done) => {
 			schema.fields[0].disabled = true;
@@ -396,23 +396,23 @@ describe("VueFormGenerator.vue", () => {
 
 				done();
 			});
-		});	
+		});
 
 	});
 
 	describe("check fieldReadonly with function", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",		
+				{
+					type: "input",
 					inputType: "text",
-					label: "Name", 
-					model: "name", 
-					readonly(model) { return model.status; }	
+					label: "Name",
+					model: "name",
+					readonly(model) { return model.status; }
 				}
 			]
 		};
-		
+
 		let model = {
 			name: "John Doe",
 			status: true
@@ -424,7 +424,7 @@ describe("VueFormGenerator.vue", () => {
 
 		it("should be readonly", () => {
 			expect(el.querySelector(".form-group").classList.contains("readonly")).to.be.true;
-		});	
+		});
 
 		it("should be writable", (done) => {
 			model.status = false;
@@ -432,23 +432,23 @@ describe("VueFormGenerator.vue", () => {
 				expect(el.querySelector(".form-group").classList.contains("readonly")).to.be.false;
 				done();
 			});
-		});	
+		});
 
 	});
 
 	describe("check fieldFeatured with function", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",		
+				{
+					type: "input",
 					inputType: "text",
-					label: "Name", 
-					model: "name", 
-					featured(model) { return model.status; }	
+					label: "Name",
+					model: "name",
+					featured(model) { return model.status; }
 				}
 			]
 		};
-		
+
 		let model = {
 			name: "John Doe",
 			status: true
@@ -460,7 +460,7 @@ describe("VueFormGenerator.vue", () => {
 
 		it("should be featured", () => {
 			expect(el.querySelector(".form-group").classList.contains("featured")).to.be.true;
-		});	
+		});
 
 		it("should not be featured", (done) => {
 			model.status = false;
@@ -468,23 +468,23 @@ describe("VueFormGenerator.vue", () => {
 				expect(el.querySelector(".form-group").classList.contains("featured")).to.be.false;
 				done();
 			});
-		});	
+		});
 
 	});
 
 	describe("check fieldRequired with function", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",		
+				{
+					type: "input",
 					inputType: "text",
-					label: "Name", 
-					model: "name", 
-					required(model) { return model.status; }	
+					label: "Name",
+					model: "name",
+					required(model) { return model.status; }
 				}
 			]
 		};
-		
+
 		let model = {
 			name: "John Doe",
 			status: true
@@ -496,7 +496,7 @@ describe("VueFormGenerator.vue", () => {
 
 		it("should be required", () => {
 			expect(el.querySelector(".form-group").classList.contains("required")).to.be.true;
-		});	
+		});
 
 		it("should be optional", (done) => {
 			model.status = false;
@@ -504,23 +504,23 @@ describe("VueFormGenerator.vue", () => {
 				expect(el.querySelector(".form-group").classList.contains("required")).to.be.false;
 				done();
 			});
-		});	
+		});
 
 	});
 
 	describe("check fieldVisible with function", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",		
+				{
+					type: "input",
 					inputType: "text",
-					label: "Name", 
-					model: "name", 
-					visible(model) { return model.status; }	
+					label: "Name",
+					model: "name",
+					visible(model) { return model.status; }
 				}
 			]
 		};
-		
+
 		let model = {
 			name: "John Doe",
 			status: true
@@ -532,7 +532,7 @@ describe("VueFormGenerator.vue", () => {
 
 		it("should be visible the name field", () => {
 			expect(el.querySelector("input[type=text]")).to.be.defined;
-		});	
+		});
 
 		it("should be hidden the name field", (done) => {
 			model.status = false;
@@ -540,18 +540,18 @@ describe("VueFormGenerator.vue", () => {
 				expect(el.querySelector("input[type=text]")).to.be.null;
 				done();
 			});
-		});	
+		});
 
 	});
 
 	describe("check fieldVisible with const", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",		
+				{
+					type: "input",
 					inputType: "text",
-					label: "Name", 
-					model: "name", 
+					label: "Name",
+					model: "name",
 					visible: true
 				}
 			]
@@ -565,7 +565,7 @@ describe("VueFormGenerator.vue", () => {
 
 		it("should be enabled the name field", () => {
 			expect(el.querySelector("input[type=text]")).to.be.defined;
-		});	
+		});
 
 		it("should be disabled the name field", (done) => {
 			schema.fields[0].visible = false;
@@ -573,7 +573,7 @@ describe("VueFormGenerator.vue", () => {
 				expect(el.querySelector("input[type=text]")).to.be.null;
 				done();
 			});
-		});	
+		});
 
 	});
 
@@ -664,10 +664,10 @@ describe("VueFormGenerator.vue", () => {
 	describe("check if option null", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",		
+				{
+					type: "input",
 					inputType: "text",
-					label: "Name", 
+					label: "Name",
 					model: "name"
 				}
 			]
@@ -698,11 +698,11 @@ describe("VueFormGenerator.vue", () => {
 	describe("check validateAfterLoad option", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",	
-					inputType: "text", 	
-					label: "Name", 
-					model: "name", 
+				{
+					type: "input",
+					inputType: "text",
+					label: "Name",
+					model: "name",
 					min: 3,
 					validator: VueFormGenerator.validators.string
 				}
@@ -733,7 +733,7 @@ describe("VueFormGenerator.vue", () => {
 				expect(form.errors).to.be.length(1);
 				done();
 			}, 150);
-		});		
+		});
 
 		it("should be no errors if model is correct", (done) => {
 			form.model = { name: "Bob" };
@@ -741,7 +741,7 @@ describe("VueFormGenerator.vue", () => {
 				expect(form.errors).to.be.length(0);
 				done();
 			}, 150);
-		});		
+		});
 
 		it("should be no errors if validateAfterLoad is false", (done) => {
 			form.options.validateAfterLoad = false;
@@ -750,18 +750,18 @@ describe("VueFormGenerator.vue", () => {
 				expect(form.errors).to.be.length(0);
 				done();
 			}, 150);
-		});		
+		});
 
 	});
 
 	describe("check onValidated event", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",	
-					inputType: "text", 	
-					label: "Name", 
-					model: "name", 
+				{
+					type: "input",
+					inputType: "text",
+					label: "Name",
+					model: "name",
 					min: 3,
 					validator: VueFormGenerator.validators.string
 				}
@@ -811,7 +811,7 @@ describe("VueFormGenerator.vue", () => {
 			// console.log(onValidated.getCall(0).args[1][0].field);
 			// console.log(schema.fields[0]);
 			expect(onValidated.calledWith(false, [{ field: schema.fields[0], error: "The length of text is too small! Current: 1, Minimum: 3"}] )).to.be.true;
-		});		
+		});
 
 		it("should no validation error if model valie is valid", () => {
 			vm.model.name = "Alan";
@@ -821,17 +821,17 @@ describe("VueFormGenerator.vue", () => {
 			expect(form.errors).to.be.length(0);
 			expect(onValidated.callCount).to.be.equal(1);
 			expect(onValidated.calledWith(true, [] )).to.be.true;
-		});	
+		});
 	});
 
 	describe("check schema.onChanged when the model changed", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",	
-					inputType: "text", 	
-					label: "Name", 
-					model: "name", 
+				{
+					type: "input",
+					inputType: "text",
+					label: "Name",
+					model: "name",
 					onChanged: sinon.spy()
 				}
 			]
@@ -855,26 +855,26 @@ describe("VueFormGenerator.vue", () => {
 				expect(schema.fields[0].onChanged.called).to.be.false;
 				done();
 			});
-		});	
+		});
 
 	});
 
 	describe("check onFieldValidated method if child validate", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",	
-					inputType: "text", 	
-					label: "Name", 
-					model: "name", 
+				{
+					type: "input",
+					inputType: "text",
+					label: "Name",
+					model: "name",
 					min: 3,
 					validator: VueFormGenerator.validators.string
-				}, 
-				{	
-					type: "input",	
-					inputType: "text", 	
-					label: "City", 
-					model: "city", 
+				},
+				{
+					type: "input",
+					inputType: "text",
+					label: "City",
+					model: "city",
 					validator() { return "Validation error!"; }
 				}
 			]
@@ -925,7 +925,7 @@ describe("VueFormGenerator.vue", () => {
 			// console.log(onValidated.getCall(0).args[1][0].field);
 			// console.log(schema.fields[0]);
 			expect(onValidated.calledWith(false, [{ field: schema.fields[0], error: "The length of text is too small! Current: 1, Minimum: 3"}] )).to.be.true;
-		});		
+		});
 
 		it("should be 2 validation error", () => {
 			form.$children[1].validate();
@@ -942,17 +942,17 @@ describe("VueFormGenerator.vue", () => {
 			expect(form.errors).to.be.length(1);
 			expect(onValidated.callCount).to.be.equal(1);
 			expect(onValidated.calledWith(false, [{ field: schema.fields[1], error: "Validation error!"}] )).to.be.true;
-		});	
+		});
 	});
 
 
 	describe("check async validator", () => {
 		let schema = {
 			fields: [
-				{	
-					type: "input",	
-					inputType: "text", 	
-					label: "Name", 
+				{
+					type: "input",
+					inputType: "text",
+					label: "Name",
 					model: "name",
 					validator(value) {
 						return new Promise(resolve => {
@@ -1014,7 +1014,32 @@ describe("VueFormGenerator.vue", () => {
 
 				cb();
 			}, 100);
-		});		
+		});
+	});
+
+	describe("check fieldTypeHasLabel function", () => {
+		let form;
+		before( () => {
+			createFormGenerator({ fields: [] }, {});
+			form = vm.$refs.form;
+		});
+
+		it("should return true", () => {
+			expect(form.fieldTypeHasLabel({ type: "input", inputType: "checkbox"})).to.be.true;
+			expect(form.fieldTypeHasLabel({ type: "input", inputType: "text"})).to.be.true;
+			expect(form.fieldTypeHasLabel({ type: "checklist" })).to.be.true;
+		});
+
+		it("should return false", () => {
+			expect(form.fieldTypeHasLabel({ type: "input", inputType: "button"})).to.be.false;
+			expect(form.fieldTypeHasLabel({ type: "input", inputType: "image"})).to.be.false;
+			expect(form.fieldTypeHasLabel({ type: "input", inputType: "submit"})).to.be.false;
+			expect(form.fieldTypeHasLabel({ type: "input", inputType: "reset"})).to.be.false;
+		});
+
+		it("should default to true for unknown types", () => {
+			expect(form.fieldTypeHasLabel({ type: "input", inputType: "unsupported-or-unknown"})).to.be.true;
+		});
 	});
 
-});
\ No newline at end of file
+});
diff --git a/test/unit/specs/fields/abstractField.spec.js b/test/unit/specs/fields/abstractField.spec.js
index 1426682c..3c388ea3 100644
--- a/test/unit/specs/fields/abstractField.spec.js
+++ b/test/unit/specs/fields/abstractField.spec.js
@@ -10,7 +10,7 @@ Vue.component("AbstractField", AbstractField);
 let el, vm, field;
 
 function createField(test, schema = {}, model = null, disabled = false, options) {
-	let elm = document.createElement("div");		
+	let elm = document.createElement("div");
 
 	vm = new Vue({
 		// eslint-disable-next-line quotes
@@ -55,16 +55,16 @@ describe("abstractField.vue", function() {
 		});
 
 	});
-	
+
 	describe("check nested value", () => {
 		let schema = {
 			type: "text",
 			label: "Name",
 			model: "user.name"
 		};
-		let model = { 
+		let model = {
 			user: {
-				name: "John Doe" 
+				name: "John Doe"
 			}
 		};
 
@@ -90,7 +90,7 @@ describe("abstractField.vue", function() {
 			label: "Name",
 			model: "user.name.first"
 		};
-		let model = { 
+		let model = {
 			user: {
 			}
 		};
@@ -169,7 +169,7 @@ describe("abstractField.vue", function() {
 			expect(model.name).to.be.equal("!!Foo Bar!!");
 		});
 
-	});	
+	});
 
 	describe("check schema onChanged event", () => {
 		let schema = {
@@ -194,12 +194,12 @@ describe("abstractField.vue", function() {
 			});
 		});
 
-	});	
+	});
 
 	describe("check validateAfterChanged option", () => {
 		let schema = {
-			type: "text",		
-			label: "Name", 
+			type: "text",
+			label: "Name",
 			model: "name"
 		};
 
@@ -230,13 +230,13 @@ describe("abstractField.vue", function() {
 			});
 		});
 
-	});	
+	});
 
 	describe("check validate function with one validator", () => {
 		let schema = {
-			type: "text",		
-			label: "Name", 
-			model: "name", 
+			type: "text",
+			label: "Name",
+			model: "name",
 			validator: sinon.spy()
 		};
 
@@ -253,13 +253,13 @@ describe("abstractField.vue", function() {
 			expect(schema.validator.calledWith(field.value, schema, model)).to.be.true;
 		});
 
-	});	
+	});
 
 	describe("check validate function if field is disabled", () => {
 		let schema = {
-			type: "text",		
-			label: "Name", 
-			model: "name", 
+			type: "text",
+			label: "Name",
+			model: "name",
 			validator: sinon.spy()
 		};
 
@@ -275,13 +275,13 @@ describe("abstractField.vue", function() {
 			expect(schema.validator.callCount).to.be.equal(0);
 		});
 
-	});	
+	});
 
 	describe("check validate function if field is readonly", () => {
 		let schema = {
-			type: "text",		
-			label: "Name", 
-			model: "name", 
+			type: "text",
+			label: "Name",
+			model: "name",
 			readonly: true,
 			validator: sinon.spy()
 		};
@@ -298,15 +298,15 @@ describe("abstractField.vue", function() {
 			expect(schema.validator.callCount).to.be.equal(0);
 		});
 
-	});		
+	});
 
 	describe("check validate function with validator array", () => {
 		let spy1 = sinon.spy();
 		let spy2 = sinon.spy();
 		let schema = {
-			type: "text",		
-			label: "Name", 
-			model: "name", 
+			type: "text",
+			label: "Name",
+			model: "name",
 			validator: [spy1, spy2]
 		};
 
@@ -355,7 +355,7 @@ describe("abstractField.vue", function() {
 			expect(schema.onValidated.calledWith(model, field.errors, schema)).to.be.true;
 		});
 
-	});		
+	});
 
 	describe("check schema onValidated event", () => {
 		let schema = {
@@ -369,7 +369,7 @@ describe("abstractField.vue", function() {
 		let onValidated = sinon.spy();
 
 		beforeEach( () => {
-			let elm = document.createElement("div");		
+			let elm = document.createElement("div");
 
 			vm = new Vue({
 				// eslint-disable-next-line quotes
@@ -384,7 +384,7 @@ describe("abstractField.vue", function() {
 			}).$mount(elm);
 			el = vm.$el;
 
-			field = vm.$refs.field;		
+			field = vm.$refs.field;
 		});
 
 		it("should return empty array", () => {
@@ -448,6 +448,36 @@ describe("abstractField.vue", function() {
 			expect(field.errors[0]).to.be.equal("Validation error!");
 		});
 
-	});	
+	});
+
+	describe("check getFieldID function", () => {
+
+		let schema = {
+			type: "text",
+			label: "First Name",
+			model: "user__model",
+			inputName: "input_name"
+		};
+		let model = {};
+
+		before( () => {
+			createField(this, schema, model);
+		});
+
+		it("should return slugified inputName, if available", () => {
+			expect(field.getFieldID(schema)).to.be.equal("input-name");
+		});
+
+		it("should return slugified label, if no inputName", () => {
+			delete(schema.inputName);
+			expect(field.getFieldID(schema)).to.be.equal("first-name");
+		});
+
+		it("should return slugified model name, if no inputName or label", () => {
+			delete(schema.label);
+			expect(field.getFieldID(schema)).to.be.equal("user-model");
+		});
+
+	});
 
-});
\ No newline at end of file
+});