Button 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});
31 
32export const ButtonFormExample = () => {
33  const form = useForm<z.infer<typeof formSchema>>({
34    resolver: zodResolver(formSchema),
35    defaultValues: {
36      email: "",
37    },
38  });
39 
40  const onSubmit = async (values: z.infer<typeof formSchema>) => {
41    await new Promise((resolve) => setTimeout(resolve, 300));
42    toast.success("Email sent successfully");
43  };
44 
45  return (
46    <Card className="w-full max-w-sm">
47      <CardHeader>
48        <CardTitle>Reset Password</CardTitle>
49        <CardDescription>
50          Please enter your email to reset your password
51        </CardDescription>
52      </CardHeader>
53      <CardContent>
54        <Form {...form}>
55          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
56            <FormField
57              control={form.control}
58              name="email"
59              render={({ field }) => (
60                <FormItem>
61                  <FormLabel>Email</FormLabel>
62                  <FormControl>
63                    <Input
64                      variant="bordered"
65                      placeholder="Please enter your Email"
66                      {...field}
67                    />
68                  </FormControl>
69                  <FormMessage />
70                </FormItem>
71              )}
72            />
73            <div className="flex justify-end pt-2">
74              <Button type="submit" loading={form.formState.isSubmitting}>
75                Submit
76              </Button>
77            </div>
78          </form>
79        </Form>
80      </CardContent>
81    </Card>
82  );
83};