Field 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  FormMessage,
16} from "@/components/ui/form";
17import { Button } from "@/components/ui/button";
18import { FieldInput } from "@/components/ui/field-input";
19import { zodResolver } from "@hookform/resolvers/zod";
20import * as React from "react";
21import { useForm } from "react-hook-form";
22import { toast } from "sonner";
23import { z } from "zod";
24 
25const formSchema = z.object({
26  email: z.string().email({
27    message: "Invalid email",
28  }),
29  password: z.string().min(6, {
30    message: "Password must be at least 6 characters",
31  }),
32});
33 
34export const FieldInputFormExample = () => {
35  const form = useForm<z.infer<typeof formSchema>>({
36    resolver: zodResolver(formSchema),
37    defaultValues: {
38      email: "",
39      password: "",
40    },
41  });
42 
43  const onSubmit = async (values: z.infer<typeof formSchema>) => {
44    await new Promise((resolve) => setTimeout(resolve, 300));
45    toast.success("Register successfully");
46  };
47 
48  return (
49    <Card className="w-full max-w-sm">
50      <CardHeader>
51        <CardTitle>Sign Up</CardTitle>
52        <CardDescription>
53          Create a new account to start using our service
54        </CardDescription>
55      </CardHeader>
56      <CardContent>
57        <Form {...form}>
58          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
59            <FormField
60              control={form.control}
61              name="email"
62              render={({ field, fieldState }) => (
63                <FormItem>
64                  <FormControl>
65                    <FieldInput
66                      id="email"
67                      label="Email"
68                      variant="bordered"
69                      aria-invalid={fieldState.invalid}
70                      {...field}
71                    />
72                  </FormControl>
73                  <FormMessage />
74                </FormItem>
75              )}
76            />
77            <FormField
78              control={form.control}
79              name="password"
80              render={({ field, fieldState }) => (
81                <FormItem>
82                  <FormControl>
83                    <FieldInput
84                      id="password"
85                      label="Password"
86                      type="password"
87                      variant="bordered"
88                      aria-invalid={fieldState.invalid}
89// … truncated