diff --git a/src/combobox/example/index.ts b/src/combobox/example/index.ts
index e34047f883..d9b77f4957 100644
--- a/src/combobox/example/index.ts
+++ b/src/combobox/example/index.ts
@@ -65,7 +65,10 @@ export default class App extends WidgetBase {
 	private _value7 = '';
 	private _value8 = '';
 	private _value9 = '';
-	private _invalid = false;
+	private _valid: { valid: boolean | undefined; message: string } = {
+		valid: true,
+		message: 'Please enter value of state'
+	};
 
 	onChange(value: string, key?: string) {
 		if (!key) {
@@ -89,7 +92,6 @@ export default class App extends WidgetBase {
 
 	render(): DNode {
 		const { onChange, onRequestResults } = this;
-
 		return v(
 			'div',
 			{
@@ -180,16 +182,21 @@ export default class App extends WidgetBase {
 					required: true,
 					onChange: (value: string) => {
 						this._value9 = value;
-						this._invalid = value.trim().length === 0;
+						this._valid.valid = value.trim().length !== 0;
 						this.invalidate();
 					},
 					getResultLabel: (result: any) => result.value,
 					onRequestResults,
 					results: this._results,
 					value: this._value9,
-					invalid: this._invalid,
+					valid: this._valid,
+					helperText: 'helper text',
 					inputProperties: {
 						placeholder: 'Enter a value'
+					},
+					onValidate: (valid: boolean | undefined) => {
+						this._valid.valid = valid;
+						this.invalidate();
 					}
 				})
 			]
diff --git a/src/combobox/index.ts b/src/combobox/index.ts
index a924f5bd9f..5609d55b2b 100644
--- a/src/combobox/index.ts
+++ b/src/combobox/index.ts
@@ -20,6 +20,7 @@ import { CommonMessages, LabeledProperties } from '../common/interfaces';
 import * as css from '../theme/combobox.m.css';
 import * as baseCss from '../common/styles/base.m.css';
 import { customElement } from '@dojo/framework/widget-core/decorators/customElement';
+import HelperText from '../helper-text/index';
 
 /**
  * @type ComboBoxProperties
@@ -31,6 +32,7 @@ import { customElement } from '@dojo/framework/widget-core/decorators/customElem
  * @property getResultLabel     Can be used to get the text label of a result based on the underlying result object
  * @property getResultSelected  Can be used to highlight the selected result. Defaults to checking the result label
  * @property getResultValue     Can be used to define a value returned by onChange when a given result is selected. Defaults to getResultLabel
+ * @property helpertext			Displays text at bottom of widget
  * @property widgetId           Optional id string for the combobox, set on the text input
  * @property inputProperties    TextInput properties to set on the underlying input
  * @property invalid            Determines if this input is valid
@@ -54,9 +56,10 @@ export interface ComboBoxProperties extends ThemedProperties, LabeledProperties,
 	getResultLabel?(result: any): DNode;
 	getResultSelected?(result: any): boolean;
 	getResultValue?(result: any): string;
+	helperText?: string;
 	widgetId?: string;
 	inputProperties?: TextInputProperties;
-	invalid?: boolean;
+	valid?: { valid?: boolean; message?: string } | boolean;
 	isResultDisabled?(result: any): boolean;
 	onBlur?(value: string, key?: string | number): void;
 	onChange?(value: string, key?: string | number): void;
@@ -64,6 +67,7 @@ export interface ComboBoxProperties extends ThemedProperties, LabeledProperties,
 	onMenuChange?(open: boolean, key?: string | number): void;
 	onRequestResults?(key?: string | number): void;
 	onResultSelect?(result: any, key?: string | number): void;
+	onValidate?: (valid: boolean | undefined, message: string) => void;
 	openOnFocus?: boolean;
 	readOnly?: boolean;
 	required?: boolean;
@@ -85,14 +89,13 @@ export enum Operation {
 		'theme',
 		'classes',
 		'extraClasses',
-		'labelAfter',
 		'labelHidden',
 		'clearable',
 		'disabled',
 		'inputProperties',
-		'invalid',
+		'valid',
 		'isResultDisabled',
-		'labelAfter',
+		'helperText',
 		'labelHidden',
 		'openOnFocus',
 		'readOnly',
@@ -100,7 +103,15 @@ export enum Operation {
 		'results'
 	],
 	attributes: ['widgetId', 'label', 'value'],
-	events: ['onBlur', 'onChange', 'onFocus', 'onMenuChange', 'onRequestResults', 'onResultSelect']
+	events: [
+		'onBlur',
+		'onChange',
+		'onFocus',
+		'onMenuChange',
+		'onRequestResults',
+		'onResultSelect',
+		'onValidate'
+	]
 })
 export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase)))<ComboBoxProperties> {
 	private _activeIndex = 0;
@@ -289,18 +300,17 @@ export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase)))<Com
 		this.invalidate();
 	}
 
-	protected getRootClasses(): (string | null)[] {
-		const { clearable, invalid } = this.properties;
-		const focus = this.meta(Focus).get('root');
+	protected get validity() {
+		const { valid = { valid: undefined, message: undefined } } = this.properties;
 
-		return [
-			css.root,
-			this._open ? css.open : null,
-			clearable ? css.clearable : null,
-			focus.containsFocus ? css.focused : null,
-			invalid === true ? css.invalid : null,
-			invalid === false ? css.valid : null
-		];
+		if (typeof valid === 'boolean') {
+			return { valid, message: undefined };
+		}
+
+		return {
+			valid: valid.valid,
+			message: valid.message
+		};
 	}
 
 	protected renderInput(results: any[]): DNode {
@@ -309,13 +319,15 @@ export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase)))<Com
 			disabled,
 			widgetId = this._idBase,
 			inputProperties = {},
-			invalid,
 			readOnly,
 			required,
 			value = '',
-			theme
+			theme,
+			onValidate
 		} = this.properties;
 
+		const { valid } = this.validity;
+
 		return w(TextInput, {
 			...inputProperties,
 			key: 'textinput',
@@ -326,7 +338,7 @@ export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase)))<Com
 					: null,
 				autocomplete: 'list'
 			},
-			valid: typeof invalid === 'boolean' ? !invalid : undefined,
+			valid,
 			disabled,
 			widgetId,
 			focus: this.shouldFocus,
@@ -334,6 +346,7 @@ export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase)))<Com
 			onFocus: this._onInputFocus,
 			onInput: this._onInput,
 			onKeyDown: this._onInputKeyDown,
+			onValidate,
 			readOnly,
 			required,
 			theme,
@@ -428,22 +441,39 @@ export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase)))<Com
 		const {
 			clearable = false,
 			widgetId = this._idBase,
-			invalid,
 			label,
 			readOnly,
 			required,
 			disabled,
 			labelHidden,
-			labelAfter,
 			results = [],
 			theme,
-			classes
+			classes,
+			helperText
 		} = this.properties;
+
+		const { valid, message } = this.validity;
+
 		const { messages } = this.localizeBundle(commonBundle);
 		const focus = this.meta(Focus).get('root');
 
 		const menu = this.renderMenu(results);
 		this._onMenuChange();
+
+		if (results.length === 0 && this._open === true) {
+			this._open = false;
+			this.invalidate();
+		}
+
+		const rootClasses = [
+			css.root,
+			this._open ? css.open : null,
+			clearable ? css.clearable : null,
+			focus.containsFocus ? css.focused : null,
+			valid === false ? css.invalid : null,
+			valid === true ? css.valid : null
+		];
+
 		this._wasOpen = this._open;
 
 		const controls = [
@@ -456,7 +486,7 @@ export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase)))<Com
 							classes,
 							disabled,
 							focused: focus.containsFocus,
-							invalid,
+							invalid: !valid,
 							readOnly,
 							required,
 							hidden: labelHidden,
@@ -480,16 +510,21 @@ export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase)))<Com
 					this.renderMenuButton(messages)
 				]
 			),
+			!this._open &&
+				w(HelperText, {
+					text: valid ? helperText : message,
+					valid
+				}),
 			menu
 		];
 
 		return v(
 			'div',
 			{
-				classes: this.theme(this.getRootClasses()),
+				classes: this.theme(rootClasses),
 				key: 'root'
 			},
-			labelAfter ? controls.reverse() : controls
+			controls
 		);
 	}
 }
diff --git a/src/combobox/tests/unit/ComboBox.ts b/src/combobox/tests/unit/ComboBox.ts
index d79d7b1b57..2edc767af7 100644
--- a/src/combobox/tests/unit/ComboBox.ts
+++ b/src/combobox/tests/unit/ComboBox.ts
@@ -26,6 +26,7 @@ import {
 	MockMetaMixin,
 	stubEvent
 } from '../../../common/tests/support/test-helpers';
+import HelperText from '../../../helper-text/index';
 
 const harness = createHarness([
 	compareId,
@@ -35,6 +36,9 @@ const harness = createHarness([
 	compareAriaOwns
 ]);
 
+const helperText = 'This is helpertext';
+const invalidMessage = 'This input is invalid';
+
 const testOptions: any[] = [
 	{
 		label: 'One',
@@ -63,7 +67,6 @@ const testProperties = {
 
 interface States {
 	disabled?: boolean;
-	invalid?: boolean;
 	readOnly?: boolean;
 	required?: boolean;
 }
@@ -84,9 +87,12 @@ const getExpectedControls = function(
 	useTestProperties: boolean,
 	label: boolean,
 	open: boolean,
-	states: States = {}
+	states: States = {},
+	validity: { valid: boolean | undefined; message: string | undefined },
+	helperText?: string
 ) {
-	const { disabled, invalid, readOnly, required } = states;
+	const { disabled, readOnly, required } = states;
+	const { valid = undefined } = validity;
 	const controlsVdom = v(
 		'div',
 		{
@@ -106,7 +112,7 @@ const getExpectedControls = function(
 				disabled,
 				focus: noop,
 				widgetId: useTestProperties ? 'foo' : '',
-				valid: invalid === false || undefined,
+				valid,
 				readOnly,
 				required,
 				theme: useTestProperties ? {} : undefined,
@@ -115,7 +121,8 @@ const getExpectedControls = function(
 				onBlur: noop,
 				onFocus: noop,
 				onInput: noop,
-				onKeyDown: noop
+				onKeyDown: noop,
+				onValidate: undefined
 			}),
 			useTestProperties
 				? v(
@@ -209,11 +216,24 @@ const getExpectedVdom = function(
 	open = false,
 	label = false,
 	states: States = {},
-	focused = false
+	focused = false,
+	validity: { valid: boolean | undefined; message: string | undefined } = {
+		valid: undefined,
+		message: undefined
+	},
+	helperText?: string
 ) {
 	const menuVdom = getExpectedMenu(useTestProperties, open);
-	const controlsVdom = getExpectedControls(useTestProperties, label, open, states);
-	const { disabled, invalid, readOnly, required } = states;
+	const controlsVdom = getExpectedControls(
+		useTestProperties,
+		label,
+		open,
+		states,
+		validity,
+		helperText
+	);
+	const { disabled, readOnly, required } = states;
+	const { valid, message } = validity;
 
 	return v(
 		'div',
@@ -223,8 +243,8 @@ const getExpectedVdom = function(
 				open ? css.open : null,
 				useTestProperties ? css.clearable : null,
 				focused ? css.focused : null,
-				null,
-				null
+				validity.valid === false ? css.invalid : null,
+				validity.valid === true ? css.valid : null
 			],
 			key: 'root'
 		},
@@ -239,7 +259,7 @@ const getExpectedVdom = function(
 							disabled,
 							focused,
 							hidden: undefined,
-							invalid,
+							invalid: !validity.valid,
 							readOnly,
 							required,
 							forId: useTestProperties ? 'foo' : ''
@@ -248,6 +268,11 @@ const getExpectedVdom = function(
 				  )
 				: null,
 			controlsVdom,
+			!open &&
+				w(HelperText, {
+					text: valid ? helperText : message,
+					valid
+				}),
 			menuVdom
 		]
 	);
@@ -533,7 +558,7 @@ registerSuite('ComboBox', {
 			const preventDefault = sinon.stub();
 			const h = harness(() => w(ComboBox, { onChange }));
 			h.trigger(`.${css.trigger}`, 'onclick', stubEvent);
-			h.expect(() => getExpectedVdom(false, true, false, {}));
+			h.expect(() => getExpectedVdom(false, false, false, {}));
 
 			h.trigger('@textinput', 'onKeyDown', Keys.Down, preventDefault);
 			h.trigger('@textinput', 'onKeyDown', Keys.Enter, preventDefault);
@@ -607,7 +632,8 @@ registerSuite('ComboBox', {
 					onBlur: noop,
 					onFocus: noop,
 					onInput: noop,
-					onKeyDown: noop
+					onKeyDown: noop,
+					onValidate: undefined
 				})
 			);
 		},
@@ -628,12 +654,10 @@ registerSuite('ComboBox', {
 		},
 
 		'widget states render correctly'() {
-			let invalid = true;
 			const h = harness(() =>
 				w(ComboBox, {
 					...testProperties,
 					disabled: true,
-					invalid,
 					readOnly: true,
 					required: true
 				})
@@ -648,7 +672,7 @@ registerSuite('ComboBox', {
 						owns: ''
 					},
 					widgetId: 'foo',
-					valid: false,
+					valid: undefined,
 					focus: noop,
 					disabled: true,
 					readOnly: true,
@@ -659,7 +683,8 @@ registerSuite('ComboBox', {
 					onBlur: noop,
 					onFocus: noop,
 					onInput: noop,
-					onKeyDown: noop
+					onKeyDown: noop,
+					onValidate: undefined
 				})
 			);
 
@@ -720,8 +745,6 @@ registerSuite('ComboBox', {
 				)
 			);
 
-			invalid = false;
-
 			h.expectPartial('@textinput', () =>
 				w(TextInput, {
 					key: 'textinput',
@@ -732,7 +755,7 @@ registerSuite('ComboBox', {
 						owns: ''
 					},
 					widgetId: 'foo',
-					valid: true,
+					valid: undefined,
 					focus: noop,
 					disabled: true,
 					readOnly: true,
@@ -742,7 +765,8 @@ registerSuite('ComboBox', {
 					onBlur: noop,
 					onFocus: noop,
 					onInput: noop,
-					onKeyDown: noop
+					onKeyDown: noop,
+					onValidate: undefined
 				})
 			);
 		},
@@ -811,6 +835,97 @@ registerSuite('ComboBox', {
 			h.expectPartial('@dropdown', () => getExpectedMenu(true, true, { visualFocus: true }));
 			h.trigger('@dropdown', 'onmouseover', stubEvent);
 			h.expectPartial('@dropdown', () => getExpectedMenu(true, true));
+		},
+
+		'renders helpertext'() {
+			const h = harness(() =>
+				w(ComboBox, {
+					...testProperties,
+					helperText: helperText
+				})
+			);
+			h.expect(() =>
+				getExpectedVdom(
+					true,
+					false,
+					true,
+					{},
+					false,
+					{ valid: undefined, message: undefined },
+					helperText
+				)
+			);
+		},
+
+		'renders validity correctly'() {
+			let h = harness(() =>
+				w(ComboBox, {
+					...testProperties,
+					valid: undefined
+				})
+			);
+			h.expect(() =>
+				getExpectedVdom(true, false, true, {}, false, {
+					valid: undefined,
+					message: undefined
+				})
+			);
+
+			h = harness(() =>
+				w(ComboBox, {
+					...testProperties,
+					valid: true
+				})
+			);
+			h.expect(() =>
+				getExpectedVdom(true, false, true, {}, false, { valid: true, message: undefined })
+			);
+
+			h = harness(() =>
+				w(ComboBox, {
+					...testProperties,
+					valid: false
+				})
+			);
+			h.expect(() =>
+				getExpectedVdom(true, false, true, {}, false, { valid: false, message: undefined })
+			);
+
+			h = harness(() =>
+				w(ComboBox, {
+					...testProperties,
+					valid: { valid: true, message: invalidMessage }
+				})
+			);
+			h.expect(() =>
+				getExpectedVdom(true, false, true, {}, false, {
+					valid: true,
+					message: invalidMessage
+				})
+			);
+
+			h = harness(() =>
+				w(ComboBox, {
+					...testProperties,
+					valid: { valid: false, message: invalidMessage }
+				})
+			);
+			h.expect(() =>
+				getExpectedVdom(true, false, true, {}, false, {
+					valid: false,
+					message: invalidMessage
+				})
+			);
+
+			h = harness(() =>
+				w(ComboBox, {
+					...testProperties,
+					valid: { valid: false, message: undefined }
+				})
+			);
+			h.expect(() =>
+				getExpectedVdom(true, false, true, {}, false, { valid: false, message: undefined })
+			);
 		}
 	}
 });
diff --git a/src/text-input/index.ts b/src/text-input/index.ts
index ad3120dfff..3212065dd6 100644
--- a/src/text-input/index.ts
+++ b/src/text-input/index.ts
@@ -39,7 +39,7 @@ interface TextInputInternalState {
  * @property maxLength      Maximum number of characters allowed in the input
  * @property minLength      Minimum number of characters allowed in the input
  * @property placeholder    Placeholder text
- * @property value           The current value
+ * @property value          The current value
  * @property leading		Renderer for leading icon content
  * @property trailing		Renderer for trailing icon content
  */
diff --git a/src/theme/combobox.m.css b/src/theme/combobox.m.css
index 49a33e284b..787e46e6fe 100644
--- a/src/theme/combobox.m.css
+++ b/src/theme/combobox.m.css
@@ -29,7 +29,7 @@
 	cursor: pointer;
 	border: none;
 	background: none;
-	top: 50%;
+	top: .5rem;
 	transform: translateY(-50%);
 	padding: 0;
 }
diff --git a/src/time-picker/index.ts b/src/time-picker/index.ts
index 0100143941..b76579cea6 100644
--- a/src/time-picker/index.ts
+++ b/src/time-picker/index.ts
@@ -315,7 +315,7 @@ export class TimePicker extends ThemedMixin(FocusMixin(WidgetBase))<TimePickerPr
 			widgetId,
 			focus: this.shouldFocus,
 			inputProperties,
-			invalid,
+			valid: !invalid,
 			isResultDisabled: isOptionDisabled,
 			label,
 			labelAfter,
diff --git a/src/time-picker/tests/unit/TimePicker.ts b/src/time-picker/tests/unit/TimePicker.ts
index 92de5a8481..fa14532a7c 100644
--- a/src/time-picker/tests/unit/TimePicker.ts
+++ b/src/time-picker/tests/unit/TimePicker.ts
@@ -39,7 +39,7 @@ const getExpectedCombobox = function(useTestProperties = false, results?: any[])
 		widgetId: useTestProperties ? 'foo' : '',
 		focus: noop,
 		inputProperties: undefined,
-		invalid: useTestProperties ? true : undefined,
+		valid: useTestProperties ? false : true,
 		isResultDisabled: undefined,
 		label: useTestProperties ? 'Some Field' : undefined,
 		labelAfter: undefined,