Form

1const formSchema = z.object({
2  username: z.string().min(3, "Username must be at least 3 characters"),
3  email: z.string().email("Invalid email address"),
4});
5
6function Example() {
7  const form = useForm<z.infer<typeof formSchema>>({
8    resolver: zodResolver(formSchema),
9    defaultValues: {
10      username: "",
11      email: "",
12    },
13  });
14
15  const onSubmit = (_values: z.infer<typeof formSchema>) => {
16    // Handle form submission
17  };
18
19  return (
20    <Form {...form}>
21      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
22        <FormField
23          control={form.control}
24          name="username"
25          render={({ field }) => (
26            <FormItem>
27              <FormLabel>Username</FormLabel>
28              <FormControl>
29                <Input placeholder="johndoe" {...field} />
30              </FormControl>
31              <FormDescription>Your public display name.</FormDescription>
32              <FormMessage />
33            </FormItem>
34          )}
35        />
36        <FormField
37          control={form.control}
38          name="email"
39          render={({ field }) => (
40            <FormItem>
41              <FormLabel>Email</FormLabel>
42              <FormControl>
43                <Input type="email" placeholder="john@example.com" {...field} />
44              </FormControl>
45              <FormMessage />
46            </FormItem>
47          )}
48        />
49        <Button type="submit">&gt; SUBMIT</Button>
50      </form>
51    </Form>
52  );
53}