diff --git a/package.json b/package.json
index 1f28697d3c82c2e773b0d9fb14db0cb5d9c5f8f0..6d247574f994d05186391dae1d0bc737a7a24957 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-redux": "^5.0.2",
     "react-router": "^3.0.5",
     "react-tag-autocomplete": "^5.4.1",
+    "recompose": "^0.25.0",
     "redux": "^3.6.0",
     "redux-form": "^7.0.3",
     "xpub-fonts": "^0.0.2"
diff --git a/src/atoms/ValidatedField.js b/src/atoms/ValidatedField.js
index 32afa56c834dd66a4456c14e1fde4b73fb5aeb0f..2028f979325fc5aa5338226f0e5be6acbfca03e3 100644
--- a/src/atoms/ValidatedField.js
+++ b/src/atoms/ValidatedField.js
@@ -1,33 +1,41 @@
 import React from 'react'
+import { compose, withHandlers } from 'recompose'
 import classnames from 'classnames'
 import { Field } from 'redux-form'
 import classes from './ValidatedField.local.scss'
 
 // TODO: pass ...props.input to children automatically?
 
-const ValidatedField = ({ component, ...rest }) => (
-  <Field
-    {...rest}
-    component={({ meta, input }) => (
-      <div className={classes.root}>
-        {component(input)}
+const ValidatedFieldComponent = ({ component }) => ({ meta, input }) => (
+  <div>
+    {component(input)}
 
-        <div className={classes.messages}>
-          {meta.error && (
-            <div className={classnames(classes.message, classes.error)}>
-              {meta.error}
-            </div>
-          )}
+    {console.log(meta)}
 
-          {meta.warning && (
-            <div className={classnames(classes.message, classes.warning)}>
-              {meta.warning}
-            </div>
-          )}
-        </div>
+    {meta.touched && (
+      <div className={classes.messages}>
+        {meta.error && (
+          <div className={classnames(classes.message, classes.error)}>
+            {meta.error}
+          </div>
+        )}
+
+        {meta.warning && (
+          <div className={classnames(classes.message, classes.warning)}>
+            {meta.warning}
+          </div>
+        )}
       </div>
     )}
-  />
+  </div>
+)
+
+const ValidatedField = ({ fieldComponent, ...rest }) => (
+  <Field {...rest} component={fieldComponent}/>
 )
 
-export default ValidatedField
+export default compose(
+  withHandlers({
+    fieldComponent: ValidatedFieldComponent
+  })
+)(ValidatedField)
diff --git a/src/atoms/ValidatedField.md b/src/atoms/ValidatedField.md
index 78e3bd0b183966b55825a1c154c03f21af97e6c7..136df6151838d3a57fea4c08e20b4feabaa49aa2 100644
--- a/src/atoms/ValidatedField.md
+++ b/src/atoms/ValidatedField.md
@@ -8,11 +8,12 @@ const ValidatedFieldForm = reduxForm({
   onChange: values => console.log(values)
 })(ValidatedField);
 
+const TextInput = input => <TextField {...input}/>;
+
 <ValidatedFieldForm 
     name="error" 
     validate={() => 'Required'}
-    component={input => <TextField {...input}/>}
-    />
+    component={TextInput}/>
 ```
 
 ```js
@@ -23,9 +24,10 @@ const ValidatedFieldForm = reduxForm({
   onChange: values => console.log(values)
 })(ValidatedField);
 
+const TextInput = input => <TextField {...input}/>;
+
 <ValidatedFieldForm 
     name="warning" 
     warn={() => 'Expected'}
-    component={input => <TextField {...input}/>}
-    />
+    component={TextInput}/>
 ```