Input

import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const formSchema = z.object({
  username: z.string().min(2, { message: "Username must be at least 2 characters." }),
  email: z.string().email(),
  cardNumber: z.string().min(13, { message: "Card number must be at least 13 digits." }),
  code: z.string().min(6, {
        message: "Your one-time password must be 6 characters.",
    }),
});

const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: { username: "", email: "", cardNumber: "", code: "" },
});

function onSubmit(data: z.infer<typeof formSchema>) {
  toast("You submitted the following values", {
    description: (
      <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
        <code className="text-white">{JSON.stringify(data, null, 2)}</code>
      </pre>
    ),
  });
}

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
    <InputForm
      control={form.control}
      name="username"
      label="Username"
      placeholder="shadcn"
      description="This is your public display name."
      leftIcon={User02}
      tooltip="This is a tooltip"
      isRequired
    />
    <InputForm
      control={form.control}
      type="email"
      name="email"
      label="Email"
      placeholder="Your email"
      description="This is your login email."
      leftIcon={Mail02}
      tooltip="This is a tooltip"
      isRequired
    />
    <PaymentInputForm
      control={form.control}
      name="cardNumber"
      label="Card Number"
      placeholder="1234 5678 9012 3456"
      description="Enter your credit card number."
      isRequired
    />
    <InputOTPForm
        name="code"
        control={form.control}
        label="Code de vérification"
        description="Entrez le code"
        slots={6}
        separator={true}
        isRequired
    />
    <Button type="submit">Submit</Button>
  </form>
</Form>