image/text form

1 files changed, 19 insertions, 3 deletions

diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js
index 36369b5..4f52a5e 100644
--- a/frontend/common/form.component.js
+++ b/frontend/common/form.component.js
@@ -3,13 +3,14 @@ import { courtesyS } from '../util'
 
 export const TextInput = props => (
   <label className={props.error ? 'error' : 'text'}>
-    <span>{props.title}</span>
+    {props.title && <span>{props.title}</span>}
     <input
       type="text"
       required={props.required}
       onChange={props.onChange}
       name={props.name}
       value={props.data[props.name]}
+      placeholder={props.placeholder}
       autoComplete={props.autoComplete}
     />
   </label>
@@ -40,7 +41,7 @@ export const NumberInput = props => (
 
 export const TextArea = props => (
   <label className={props.error ? 'textarea error' : 'textarea'}>
-    <span>{props.title}</span>
+    {props.title && <span>{props.title}</span>}
     <textarea
       onChange={props.onChange}
       name={props.name}
@@ -50,7 +51,7 @@ export const TextArea = props => (
 )
 
 export const Checkbox = props => (
-  <label>
+  <label className="checkbox">
     <input
       type="checkbox"
       name={props.name}
@@ -62,6 +63,21 @@ export const Checkbox = props => (
   </label>
 )
 
+export const Radio = props => {
+  return (
+    <label className="radio">
+      <input
+        type="radio"
+        name={props.name}
+        value={props.value}
+        checked={props.value === props.currentValue}
+        onChange={() => props.onChange(props.name, props.value)}
+      />
+      <span>{props.label}</span>
+    </label>
+  )
+}
+
 export class Select extends Component {
   state = {
     focused: false,