Input Form Demo

1"use client";
2 
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardHeader,
8  CardTitle,
9} from "@/components/ui/card";
10import {
11  Form,
12  FormControl,
13  FormField,
14  FormItem,
15  FormLabel,
16  FormMessage,
17} from "@/components/ui/form";
18import { Button } from "@/components/ui/button";
19import { Input } from "@/components/ui/input";
20import { zodResolver } from "@hookform/resolvers/zod";
21import * as React from "react";
22import { useForm } from "react-hook-form";
23import { toast } from "sonner";
24import { z } from "zod";
25 
26const formSchema = z.object({
27  email: z.string().email({
28    message: "Invalid email",
29  }),
30  password: z.string().nonempty({
31    message: "Password is required",
32  }),
33});
34 
35export const InputFormExample = () => {
36  const form = useForm<z.infer<typeof formSchema>>({
37    resolver: zodResolver(formSchema),
38    defaultValues: {
39      email: "",
40      password: "",
41    },
42  });
43 
44  const onSubmit = async (values: z.infer<typeof formSchema>) => {
45    await new Promise((resolve) => setTimeout(resolve, 300));
46    toast.success("Login Successfully");
47  };
48 
49  return (
50    <Card className="w-full max-w-sm">
51      <CardHeader>
52        <CardTitle>Login</CardTitle>
53        <CardDescription>Enjoy the best experience with us</CardDescription>
54      </CardHeader>
55      <CardContent>
56        <Form {...form}>
57          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
58            <FormField
59              control={form.control}
60              name="email"
61              render={({ field }) => (
62                <FormItem>
63                  <FormLabel>Email</FormLabel>
64                  <FormControl>
65                    <Input
66                      variant="bordered"
67                      placeholder="Please enter your Email"
68                      {...field}
69                    />
70                  </FormControl>
71                  <FormMessage />
72                </FormItem>
73              )}
74            />
75            <FormField
76              control={form.control}
77              name="password"
78              render={({ field }) => (
79                <FormItem>
80                  <FormLabel>Password</FormLabel>
81                  <FormControl>
82                    <Input
83                      type="password"
84                      variant="bordered"
85                      placeholder="Please enter your Password"
86                      {...field}
87                    />
88                  </FormControl>
89                  <FormMessage />
90// … truncated