feat: added input inline error message

strvcom · Jun 13, 2022 · 40bd123 · 40bd123
1 parent d53abb1
commit 40bd123
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/features/ui/components/Input/index.tsx b/src/features/ui/components/Input/index.tsx
@@ -6,13 +6,14 @@ import {
   InputWrapper,
   Label,
   LabelText,
+  ErrorMessage,
   PasswordToggle,
   StyledInput,
 } from './styled'
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label: string
-  error?: string
+  error?: string | null
 }
 
 export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
@@ -40,6 +41,8 @@ export const Input: FC<Props> = ({ label, name, type, error, ...rest }) => {
             <EyeIcon />
           </PasswordToggle>
         )}
+
+        {error ? <ErrorMessage>{error}</ErrorMessage> : null}
       </Label>
     </InputWrapper>
   )

diff --git a/src/features/ui/components/Input/styled.ts b/src/features/ui/components/Input/styled.ts
@@ -79,6 +79,10 @@ export const Label = styled.label<{ hasError?: boolean }>`
     `}
 `
 
+export const ErrorMessage = styled.span`
+  color: ${colors.accent.destructive};
+`
+
 export const PasswordToggle = styled.button.attrs({ type: 'button' })<{
   isActive: boolean
 }>`