chore: onboarding workspace name valdiation error indicator added (#3808)

web/components/onboarding/user-details.tsx

@@ -62,6 +62,7 @@ export const UserDetails: React.FC<Props> = observer((props) => {
     formState: { errors, isSubmitting, isValid },
   } = useForm<IUser>({
     defaultValues,
+    mode: "onChange",
   });
 
   const onSubmit = async (formData: IUser) => {
@@ -164,15 +165,16 @@ export const UserDetails: React.FC<Props> = observer((props) => {
                 )}
               </button>
 
+              <div className="flex flex-col gap-1">
                 <div className="my-2 mr-10 flex w-full rounded-md bg-onboarding-background-200 text-sm">
                   <Controller
                     control={control}
                     name="first_name"
                     rules={{
-                    required: "First name is required",
+                      required: "Name is required",
                       maxLength: {
                         value: 24,
-                      message: "First name cannot exceed the limit of 24 characters",
+                        message: "Name must be within 24 characters.",
                       },
                     }}
                     render={({ field: { value, onChange, ref } }) => (
@@ -190,11 +192,12 @@ export const UserDetails: React.FC<Props> = observer((props) => {
                         hasError={Boolean(errors.first_name)}
                         placeholder="Enter your full name..."
                         className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
-                      maxLength={24}
                       />
                     )}
                   />
                 </div>
+                {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
+              </div>
             </div>
             <div className="mb-10 mt-14">
               <Controller