diff --git a/src/Text/index.js b/src/Text/index.js
index f20f7f2..ebf933c 100644
--- a/src/Text/index.js
+++ b/src/Text/index.js
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 const Text = ({
   id,
   label,
+  invalid,
   className,
   required,
   optional,
@@ -15,7 +16,7 @@ const Text = ({
   ...rest
 }) => {
   return (
-    <hx-text-control class={className} style={style}>
+    <hx-text-control class={classnames(className, { hxInvalid: invalid })} style={style}>
       <input {...rest} id={id} required={required} type="text" />
       <label
         className={classnames({
@@ -26,7 +27,6 @@ const Text = ({
       >
         {label}
       </label>
-
       {prefix && <span className="hxPrefix">{prefix}</span>}
       {suffix && <span className="hxSuffix">{suffix}</span>}
       {children}
@@ -41,6 +41,7 @@ Text.propTypes = {
   children: PropTypes.node,
   optional: PropTypes.bool,
   disabled: PropTypes.bool,
+  invalid: PropTypes.bool,
   required: PropTypes.bool,
   label: PropTypes.string,
   name: PropTypes.string,
diff --git a/src/Text/stories.js b/src/Text/stories.js
index e93093d..fdd2cc1 100644
--- a/src/Text/stories.js
+++ b/src/Text/stories.js
@@ -12,7 +12,9 @@ addParameters({
 storiesOf('Text', module).add('All Knobs', () => {
   let disabled = boolean('disabled', false);
   let required = boolean('required', false);
+  let invalid = boolean('invalid', false);
   let optional = boolean('optional', false);
+  let label = text('label', 'Text Label');
   let prefix = text('prefix', '@');
   let suffix = text('suffix', '.example.com');
 
@@ -21,10 +23,11 @@ storiesOf('Text', module).add('All Knobs', () => {
       <InputContainer>
         <Text
           id="textDemo"
+          {...(label && { label })}
           {...(disabled && { disabled })}
           {...(required && { required })}
+          {...(invalid && { invalid })}
           {...(optional && { optional })}
-          label="Username"
           onChange={callback(action('onChange'))}
         />
 
@@ -35,6 +38,7 @@ storiesOf('Text', module).add('All Knobs', () => {
           {...(disabled && { disabled })}
           {...(required && { required })}
           {...(optional && { optional })}
+          {...(invalid && { invalid })}
           {...(prefix && { prefix })}
           label="twitter handle"
           onChange={callback(action('onChange'))}
@@ -47,6 +51,7 @@ storiesOf('Text', module).add('All Knobs', () => {
           {...(disabled && { disabled })}
           {...(required && { required })}
           {...(optional && { optional })}
+          {...(invalid && { invalid })}
           {...(suffix && { suffix })}
           label="Subdomain"
           onChange={callback(action('onChange'))}
diff --git a/src/TextArea/index.js b/src/TextArea/index.js
index 291390c..24f8c82 100644
--- a/src/TextArea/index.js
+++ b/src/TextArea/index.js
@@ -2,10 +2,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const TextArea = ({ id, label, className, required, optional, children, style, ...rest }) => {
+const TextArea = ({
+  id,
+  label,
+  className,
+  required,
+  disabled,
+  optional,
+  invalid,
+  children,
+  style,
+  ...rest
+}) => {
   return (
-    <hx-textarea-control class={className} style={style}>
-      <textarea {...rest} id={id} required={required} />
+    <hx-textarea-control class={classnames(className, { hxInvalid: invalid })} style={style}>
+      <textarea {...rest} id={id} required={required} disabled={disabled} />
       <label
         className={classnames({
           hxOptional: optional,
@@ -28,6 +39,7 @@ TextArea.propTypes = {
   optional: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  invalid: PropTypes.bool,
   label: PropTypes.bool,
   name: PropTypes.string,
   onChange: PropTypes.func,
diff --git a/src/TextArea/stories.js b/src/TextArea/stories.js
index 1cfb19f..027cd40 100644
--- a/src/TextArea/stories.js
+++ b/src/TextArea/stories.js
@@ -12,15 +12,18 @@ addParameters({
 storiesOf('TextArea', module).add('All Knobs', () => {
   let disabled = boolean('disabled', false);
   let required = boolean('required', false);
+  let invalid = boolean('invalid', false);
   let optional = boolean('optional', false);
+  let label = text('label', 'TextArea Label');
 
   return (
     <InputContainer>
       <TextArea
         id="textAreaDemo"
-        lable="Comments"
+        {...(label && { label })}
         {...(disabled && { disabled })}
         {...(required && { required })}
+        {...(invalid && { invalid })}
         {...(optional && { optional })}
         onChange={callback(action('onChange'))}
       />