From 7a125a79e133a7b4cd2550bd5c1435ab66e31c90 Mon Sep 17 00:00:00 2001
From: keyurparalkar <keur.plkar@gmail.com>
Date: Tue, 16 Apr 2024 16:34:04 +0530
Subject: [PATCH] style: added validation colors to the label and error message

---
 src/App.tsx                          |  4 +---
 src/components/fields/InputField.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cf55eaa..190aded 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -55,9 +55,7 @@ function App() {
 		handleSubmit,
 		reset,
 		formState: { errors },
-	} = useForm<TFormValues>({
-		shouldUseNativeValidation: true,
-	});
+	} = useForm<TFormValues>();
 
 	const onSubmit = (data: TFormValues) => {
 		console.log("form Data = ", data);
diff --git a/src/components/fields/InputField.tsx b/src/components/fields/InputField.tsx
index 2f33a63..5590293 100644
--- a/src/components/fields/InputField.tsx
+++ b/src/components/fields/InputField.tsx
@@ -17,7 +17,9 @@ const InputField = (props: InputFieldProps) => {
 	return (
 		<>
 			<div className="flex flex-col space-y-2 my-2">
-				<Label htmlFor={htmlFor}>{labelText}</Label>
+				<Label className={`${error ? "text-red-600" : ""}`} htmlFor={htmlFor}>
+					{labelText}
+				</Label>
 				<Input
 					id="htmlFor"
 					{...rest}
@@ -25,7 +27,11 @@ const InputField = (props: InputFieldProps) => {
 					// @ts-ignore
 					{...register(htmlFor, { ...validation })}
 				/>
-				{error && <span>{error.message}</span>}
+				{error && (
+					<span className="text-xs text-red-600 font-semibold">
+						{error.message}
+					</span>
+				)}
 			</div>
 		</>
 	);