2 files changed, 21 insertions, 1 deletions
diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js
index fb5b26d..cc0607d 100644
--- a/frontend/common/form.component.js
+++ b/frontend/common/form.component.js
@@ -39,6 +39,26 @@ export const NumberInput = props => (
   </label>
 )
 
+export const ColorInput = props => (
+  <label className={props.error ? 'error color' : 'text color'}>
+    <span>{props.title}</span>
+    <input
+      type="color"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+    <input
+      type="text"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+  </label>
+)
+
 export const TextArea = props => (
   <label className={props.error ? 'textarea error' : 'textarea'}>
     {props.title && <span>{props.title}</span>}
diff --git a/frontend/common/index.js b/frontend/common/index.js
index d33442a..6f9747a 100644
--- a/frontend/common/index.js
+++ b/frontend/common/index.js
@@ -5,7 +5,7 @@ export {
 export {
   Select, Checkbox, Radio, FileInput, FileInputField,
   TextInput, NumberInput, TextArea, SubmitButton,
-  LabelDescription,
+  LabelDescription, ColorInput,
 } from './form.component'
 export {
   Loader, Swatch, Dot, Columns, Statistic, Detections, Progress