Autocomplete Form Demo

1import {
2  Card,
3  CardContent,
4  CardDescription,
5  CardHeader,
6  CardTitle,
7} from "@/components/ui/card";
8import {
9  FormControl,
10  FormField,
11  FormItem,
12  FormLabel,
13  FormMessage,
14} from "@/components/ui/form";
15import { Form } from "@/components/ui/form";
16import {
17  Autocomplete,
18  AutocompleteContent,
19  AutocompleteEmpty,
20  AutocompleteInput,
21  AutocompleteItem,
22} from "@/components/ui/autocomplete";
23import { Button } from "@/components/ui/button";
24import { zodResolver } from "@hookform/resolvers/zod";
25import Image from "next/image";
26import { useForm } from "react-hook-form";
27import { toast } from "sonner";
28import { z } from "zod";
29 
30const TOKENS = [
31  "USDT",
32  "USDC",
33  "USDe",
34  "USDS",
35  "DAI",
36  "USD1",
37  "FDUSD",
38  "USDY",
39  "FRAX",
40];
41 
42const formSchema = z.object({
43  token: z.string().nonempty({
44    message: "Token is required",
45  }),
46});
47 
48export const AutocompleteFormExample = () => {
49  const form = useForm<z.infer<typeof formSchema>>({
50    resolver: zodResolver(formSchema),
51    defaultValues: {
52      token: "",
53    },
54  });
55 
56  const onSubmit = async (values: z.infer<typeof formSchema>) => {
57    await new Promise((resolve) => setTimeout(resolve, 300));
58    toast.success("Submit Successfully");
59  };
60 
61  return (
62    <Card className="w-full max-w-sm rounded-3xl">
63      <CardHeader>
64        <CardTitle>Withdraw Asset</CardTitle>
65        <CardDescription>Select the asset you want to withdraw</CardDescription>
66      </CardHeader>
67      <CardContent>
68        <Form {...form}>
69          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
70            <FormField
71              control={form.control}
72              name="token"
73              render={({ field }) => (
74                <FormItem>
75                  <FormControl>
76                    <Autocomplete
77                      value={field.value}
78                      onChange={field.onChange}
79                      variant="bordered"
80                    >
81                      <AutocompleteInput
82                        variant="bordered"
83                        placeholder="Select a token"
84                        className="rounded-2xl"
85                        startContent={
86                          field.value && (
87                            <Image
88                              src={`/tokens/${field.value}.svg`}
89                              alt={field.value}
90                              width={24}
91                              height={24}
92// … truncated