How to combine ShadcnUI with NextUi in NextJs14

Question

I am using form from Shadcn UI like this

const FormSchema = z.object({
  email: z.string().min(1, "Email is required").email("Invalid email"),
  password: z
    .string()
    .min(1, "Password is required")
    .min(8, "Password must have than 8 characters"),
});

const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

<Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
        <div className="space-y-2">
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input placeholder="johndoe" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>
      </form>
    </Form>

but I want to change Input from React to Input from NextUI like this

<Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
        <div className="space-y-2">
          <FormField
            control={form.control}
            name="email"
            render={({ field }: { field: any }) => {
              const { error } = useFormField();
              return (
                <InputCustom
                  size={"md"}
                  isRequired
                  type="email"
                  label="Email"
                  placeholder="Enter your email"
                  errorMessage={error?.message}
                  isInvalid={!!error?.message}
                  {...field}
                />
              );
            }}
          />
    </Form>

So when i submit form with empty input, It didn't show error message "Invalid email". How can i use NextUI component inside ShadcnUI Form. Thanks so much <3

Answer 1

Use your Form as bellow:

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
    <div className="space-y-2">
      <FormField
        control={form.control}
        name="username"
        render={({ field }: { field: any }) => {
          const error = form.formState.errors?.username;
          return (
            <InputCustom
              size={"md"}
              isRequired
              type="email"
              label="Email"
              placeholder="Enter your email"
              errorMessage={error?.message}
              isInvalid={!!error?.message}
              {...field}
            />
          );
        }}
      />
    </div>
  </form>
</Form>

For more details, please check the docs here