Form

1import {
2  Form,
3  FormControl,
4  FormDescription,
5  FormField,
6  FormItem,
7  FormLabel,
8  FormMessage,
9} from "passport-ui";
10import { Button } from "passport-ui";
11import { Input } from "passport-ui";
12import { useForm } from "react-hook-form";
13import { zodResolver } from "@hookform/resolvers/zod";
14import { z } from "zod";

1const formSchema = z.object({
2  username: z.string().min(2, {
3    message: "Username must be at least 2 characters.",
4  }),
5  email: z.email({
6    message: "Please enter a valid email address.",
7  }),
8});
9 
10function FormExample() {
11  const form = useForm<z.infer<typeof formSchema>>({
12    resolver: zodResolver(formSchema),
13    defaultValues: {
14      username: "",
15      email: "",
16    },
17  });
18 
19  function onSubmit(values: z.infer<typeof formSchema>) {
20    console.log(values);
21  }
22 
23  return (
24    <Form {...form}>
25      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
26        <FormField
27          control={form.control}
28          name="username"
29          render={({ field }) => (
30            <FormItem>
31              <FormLabel>Username</FormLabel>
32              <FormControl>
33                <Input placeholder="Enter username" {...field} />
34              </FormControl>
35              <FormDescription>
36                This is your public display name.
37              </FormDescription>
38              <FormMessage />
39            </FormItem>
40          )}
41        />
42        <Button type="submit">Submit</Button>
43      </form>
44    </Form>
45  );
46}