style: added validation colors to the label and error message

keyurparalkar · Apr 16, 2024 · 7a125a7 · 7a125a7
1 parent 669816a
commit 7a125a7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -17,15 +17,21 @@ 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}
 					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 					// @ts-ignore
 					{...register(htmlFor, { ...validation })}
 				/>
-				{error && <span>{error.message}</span>}
+				{error && (
+					<span className="text-xs text-red-600 font-semibold">
+						{error.message}
+					</span>
+				)}
 			</div>
 		</>
 	);