diff --git a/src/atoms/Tags.js b/src/atoms/Tags.js
index 94f7aac373b661ea47479b7890490a621907f569..e4578f414f030d330f7f399fb8aa6cbb3c8febcd 100644
--- a/src/atoms/Tags.js
+++ b/src/atoms/Tags.js
@@ -34,8 +34,6 @@ class Tags extends React.Component {
     this.props.onChange(tags)
   }
 
-  // TODO: fire change event on state change
-
   render () {
     const { tags } = this.state
     const { name, suggestions, placeholder } = this.props
diff --git a/src/atoms/ValidatedField.js b/src/atoms/ValidatedField.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e01471abc3daccb22db935bc32d2381ef222987
--- /dev/null
+++ b/src/atoms/ValidatedField.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import classnames from 'classnames'
+import classes from './ValidatedField.local.css'
+
+// TODO: pass ...props.input to children automatically?
+
+const ValidatedField = ({ form, children, error, warning }) => (
+  <div>
+    {children}
+
+    <div className={classes.messages}>
+      {error && (
+        <div className={classnames(classes.message, classes.error)}>
+          {error}
+        </div>
+      )}
+
+      {warning && (
+        <div className={classnames(classes.message, classes.warning)}>
+          {warning}
+        </div>
+      )}
+    </div>
+  </div>
+)
+
+export default ValidatedField
diff --git a/src/atoms/ValidatedField.local.css b/src/atoms/ValidatedField.local.css
new file mode 100644
index 0000000000000000000000000000000000000000..82749742adccbc7b28bfbc2de248accc56158990
--- /dev/null
+++ b/src/atoms/ValidatedField.local.css
@@ -0,0 +1,18 @@
+.messages {
+  margin-top: 10px;
+}
+
+.message {
+  width: fit-content;
+  padding: 10px;
+}
+
+.error {
+  background-color: red;
+  color: white;
+}
+
+.warning {
+  background-color: orange;
+  color: white;
+}
diff --git a/src/atoms/ValidatedField.md b/src/atoms/ValidatedField.md
new file mode 100644
index 0000000000000000000000000000000000000000..15d5eaab1d9d26716dac5f2757b5c3c214835f63
--- /dev/null
+++ b/src/atoms/ValidatedField.md
@@ -0,0 +1,13 @@
+A form field that displays the results of validation.
+
+```js
+<ValidatedField error="There was an error">
+  <input/>
+</ValidatedField>
+```
+
+```js
+<ValidatedField warning="There was a warning">
+  <input/>
+</ValidatedField>
+```
diff --git a/src/index.js b/src/index.js
index 2ee87384c61188f3b65d4d1eec76a7bca4eb8fca..b98447d749fff42e720d4b7618bc590bf0648e3b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,13 @@
+/* atom */
 export { default as Button } from './atoms/Button'
 export { default as Checkbox } from './atoms/Checkbox'
 export { default as Icon } from './atoms/Icon'
 export { default as Menu } from './atoms/Menu'
 export { default as Radio } from './atoms/Radio'
 export { default as Tags } from './atoms/Tags'
+export { default as ValidatedField } from './atoms/ValidatedField'
+
+/* molecules */
 export { default as AppBar } from './molecules/AppBar'
 export { default as CheckboxGroup } from './molecules/CheckboxGroup'
 export { default as Files } from './molecules/Files'