diff --git a/src/atoms/dataEntry/Input/Input.js b/src/atoms/dataEntry/Input/Input.js
index 9cbb43ae..de922792 100644
--- a/src/atoms/dataEntry/Input/Input.js
+++ b/src/atoms/dataEntry/Input/Input.js
@@ -79,6 +79,8 @@ class Input extends PureComponent<InputProps> {
       hideErrorIndicator,
       leftIcon,
       mask,
+      onBlur,
+      onFocus,
       placeholder,
       rightIcon,
       square,
@@ -95,7 +97,9 @@ class Input extends PureComponent<InputProps> {
       hasError,
       hasLeftIcon,
       hasRightIcon,
+      onBlur,
       onChange: this.onChange,
+      onFocus,
       placeholder,
       square,
       type,
diff --git a/src/atoms/dataEntry/InputField/InputField.js b/src/atoms/dataEntry/InputField/InputField.js
index 3c6338f4..4af70943 100644
--- a/src/atoms/dataEntry/InputField/InputField.js
+++ b/src/atoms/dataEntry/InputField/InputField.js
@@ -50,9 +50,11 @@ const InputField = ({
   ...rest
   }: InputFieldProps) => {
   const { error, touched } = meta;
-  const { name, value, onChange } = input;
+  const { name, value, onChange, onFocus, onBlur } = input;
   const hasError = !!error && !!touched;
 
+  console.log(hasError, error, touched);
+
   return (
     <FormField label={ label } stretch={ stretch } direction={ direction } hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta }>
       <Input
@@ -63,6 +65,8 @@ const InputField = ({
         maxLength={ maxLength }
         name={ name }
         onChange={ onChange }
+        onFocus={ onFocus }
+        onBlur={ onBlur }
         square={ square }
         value={ value }
       />
diff --git a/src/common/Tag/Tag.js b/src/common/Tag/Tag.js
index 3ec20038..638370d8 100644
--- a/src/common/Tag/Tag.js
+++ b/src/common/Tag/Tag.js
@@ -43,6 +43,8 @@ const COLLECTED_PROPS = [
   'label',
   'name',
   'onChange',
+  'onBlur',
+  'onFocus',
   'onClick',
   'onDoubleClick',
   'onMouseDown',
diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
index 5349b5ef..6bc95007 100644
--- a/storybook/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -2281,6 +2281,8 @@ exports[`Storyshots ATOMS/DATA ENTRY/CheckboxField default 1`] = `
       <label
         className="emotion-5"
         name={undefined}
+        onBlur={undefined}
+        onFocus={undefined}
       >
         <div
           className="emotion-2"
@@ -2432,6 +2434,8 @@ exports[`Storyshots ATOMS/DATA ENTRY/CheckboxField with checked 1`] = `
       <label
         className="emotion-5"
         name={undefined}
+        onBlur={undefined}
+        onFocus={undefined}
       >
         <div
           className="emotion-2"
@@ -2598,6 +2602,8 @@ exports[`Storyshots ATOMS/DATA ENTRY/CheckboxField with error 1`] = `
       <label
         className="emotion-5"
         name={undefined}
+        onBlur={undefined}
+        onFocus={undefined}
       >
         <div
           className="emotion-2"
@@ -2822,7 +2828,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form with groups 1`] = `
             >
               <input
                 className="emotion-2"
+                onBlur={undefined}
                 onChange={[Function]}
+                onFocus={undefined}
                 placeholder={undefined}
                 type="text"
                 value={undefined}
@@ -2847,7 +2855,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form with groups 1`] = `
             >
               <input
                 className="emotion-2"
+                onBlur={undefined}
                 onChange={[Function]}
+                onFocus={undefined}
                 placeholder={undefined}
                 type="text"
                 value={undefined}
@@ -2872,7 +2882,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form with groups 1`] = `
             >
               <input
                 className="emotion-2"
+                onBlur={undefined}
                 onChange={[Function]}
+                onFocus={undefined}
                 placeholder={undefined}
                 type="text"
                 value={undefined}
@@ -2906,7 +2918,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form with groups 1`] = `
             >
               <input
                 className="emotion-2"
+                onBlur={undefined}
                 onChange={[Function]}
+                onFocus={undefined}
                 placeholder={undefined}
                 type="text"
                 value={undefined}
@@ -2931,7 +2945,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form with groups 1`] = `
             >
               <input
                 className="emotion-2"
+                onBlur={undefined}
                 onChange={[Function]}
+                onFocus={undefined}
                 placeholder={undefined}
                 type="text"
                 value={undefined}
@@ -3078,7 +3094,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form without groups 1`] = `
           >
             <input
               className="emotion-1"
+              onBlur={undefined}
               onChange={[Function]}
+              onFocus={undefined}
               placeholder={undefined}
               type="text"
               value={undefined}
@@ -3103,7 +3121,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form without groups 1`] = `
           >
             <input
               className="emotion-1"
+              onBlur={undefined}
               onChange={[Function]}
+              onFocus={undefined}
               placeholder={undefined}
               type="text"
               value={undefined}
@@ -3128,7 +3148,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form without groups 1`] = `
           >
             <input
               className="emotion-1"
+              onBlur={undefined}
               onChange={[Function]}
+              onFocus={undefined}
               placeholder={undefined}
               type="text"
               value={undefined}
@@ -3153,7 +3175,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form without groups 1`] = `
           >
             <input
               className="emotion-1"
+              onBlur={undefined}
               onChange={[Function]}
+              onFocus={undefined}
               placeholder={undefined}
               type="text"
               value={undefined}
@@ -3178,7 +3202,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Form without groups 1`] = `
           >
             <input
               className="emotion-1"
+              onBlur={undefined}
               onChange={[Function]}
+              onFocus={undefined}
               placeholder={undefined}
               type="text"
               value={undefined}
@@ -3241,7 +3267,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with center align 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value={undefined}
@@ -3313,7 +3341,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with error 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value={undefined}
@@ -3375,7 +3405,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with html auto-complete 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value={undefined}
@@ -3453,7 +3485,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with left icon 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value={undefined}
@@ -3517,7 +3551,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with placeholder 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder="custom placeholder"
       type="text"
       value={undefined}
@@ -3595,7 +3631,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with right icon 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value={undefined}
@@ -3679,7 +3717,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with right icon and error 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value={undefined}
@@ -3744,7 +3784,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with square=true 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value={undefined}
@@ -3803,7 +3845,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with stretch=false 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value={undefined}
@@ -3862,7 +3906,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input with value 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value="value"
@@ -3921,7 +3967,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/Input without value 1`] = `
   >
     <input
       className="emotion-0"
+      onBlur={undefined}
       onChange={[Function]}
+      onFocus={undefined}
       placeholder={undefined}
       type="text"
       value={undefined}
@@ -4010,7 +4058,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with center align 1`] = `
       >
         <input
           className="emotion-0"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}
@@ -4140,7 +4190,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with error 1`] = `
       >
         <input
           className="emotion-1"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}
@@ -4282,7 +4334,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with error and row direction 1`]
       >
         <input
           className="emotion-1"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}
@@ -4397,7 +4451,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with placeholder 1`] = `
       >
         <input
           className="emotion-1"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder="placeholder"
           type="text"
           value={undefined}
@@ -4500,7 +4556,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with row direction 1`] = `
       >
         <input
           className="emotion-1"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}
@@ -4603,7 +4661,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with row direction and stretch=f
       >
         <input
           className="emotion-1"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}
@@ -4707,7 +4767,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with square input 1`] = `
       >
         <input
           className="emotion-1"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}
@@ -4810,7 +4872,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with stretch 1`] = `
       >
         <input
           className="emotion-1"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}
@@ -4913,7 +4977,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField with value 1`] = `
       >
         <input
           className="emotion-1"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value="value"
@@ -5005,7 +5071,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField without error label and indicato
       >
         <input
           className="emotion-0"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}
@@ -5096,7 +5164,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField without label 1`] = `
       >
         <input
           className="emotion-0"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}
@@ -5199,7 +5269,9 @@ exports[`Storyshots ATOMS/DATA ENTRY/InputField without value 1`] = `
       >
         <input
           className="emotion-1"
+          onBlur={undefined}
           onChange={[Function]}
+          onFocus={undefined}
           placeholder={undefined}
           type="text"
           value={undefined}