Add error text under the input

src/components/Input/index.js

@@ -49,7 +49,19 @@ const StyledInput = styled.input`
     }
 `;
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+`;
+
+const InputWrapper = styled.div``;
+
+const ErrorLabel = styled.span`
+    margin-top: 10px;
+    font-size: ${FONT_SIZE.SMALLER};
+    color: ${colors.ERROR_PRIMARY};
+`;
 
 const StyledIcon = styled(Icon)`
     position: absolute;
@@ -57,9 +69,10 @@ const StyledIcon = styled(Icon)`
 `;
 
 const Input = ({
-    type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError,
+    type, autoComplete, autoCorrect, autoCapitalize, spellCheck, value, onChange, isSuccess, isWarning, isError, errorText,
 }) => (
     <Wrapper>
+        <InputWrapper>
             <StyledInput
                 type={type}
                 autoComplete={autoComplete}
@@ -90,6 +103,12 @@ const Input = ({
                     color={colors.SUCCESS_PRIMARY}
                 />
             )}
+        </InputWrapper>
+        {isError && (
+            <ErrorLabel>
+                {errorText}
+            </ErrorLabel>
+        )}
     </Wrapper>
 );
 
@@ -104,6 +123,7 @@ Input.propTypes = {
     isSuccess: PropTypes.bool,
     isWarning: PropTypes.bool,
     isError: PropTypes.bool,
+    errorText: PropTypes.string,
 };
 
 export default Input;