input-otp-form-demo

1"use client"
2 
3import * as React from "react"
4import { zodResolver } from "@hookform/resolvers/zod"
5import { useForm } from "react-hook-form"
6import { toast } from "sonner"
7import { z } from "zod"
8 
9import {
10  InputOTP,
11  InputOTPGroup,
12  InputOTPSlot,
13} from "@/components/ui/input-otp"
14import { Button } from "@/components/ui/button"
15import {
16  Card,
17  CardContent,
18  CardDescription,
19  CardFooter,
20  CardHeader,
21  CardTitle,
22} from "@/components/ui/card"
23import { Checkbox } from "@/components/ui/checkbox"
24import {
25  Form,
26  FormControl,
27  FormField,
28  FormItem,
29  FormLabel,
30  FormMessage,
31} from "@/components/ui/form"
32 
33const FormSchema = z.object({
34  pin: z
35    .string()
36    .min(6, {
37      message: "Your one-time password must be 6 characters.",
38    })
39    .regex(/^\d+$/, {
40      message: "Your one-time password must contain numbers only.",
41    }),
42})
43 
44export default function InputOTPForm() {
45  const [autoSubmit, setAutoSubmit] = React.useState(true)
46 
47  const form = useForm<z.infer<typeof FormSchema>>({
48    resolver: zodResolver(FormSchema),
49    defaultValues: {
50      pin: "",
51    },
52  })
53 
54  // Watch the pin value for auto-submit
55  const pinValue = form.watch("pin")
56 
57  React.useEffect(() => {
58    if (autoSubmit && pinValue.length === 6) {
59      form.handleSubmit(onSubmit)()
60    }
61  }, [pinValue, autoSubmit])
62 
63  function onSubmit(data: z.infer<typeof FormSchema>) {
64    toast("You submitted the following values:", {
65      description: (
66        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
67          <code>{JSON.stringify(data, null, 2)}</code>
68        </pre>
69      ),
70      position: "bottom-right",
71      classNames: {
72        content: "flex flex-col gap-2",
73      },
74      style: {
75        "--border-radius": "calc(var(--radius)  + 4px)",
76      } as React.CSSProperties,
77    })
78    form.reset()
79  }
80 
81  return (
82    <div className="w-full space-y-4 sm:max-w-md">
83      <Card>
84        <CardHeader>
85          <CardTitle>Two-Factor Authentication</CardTitle>
86          <CardDescription>
87            Please enter the 6-digit code sent to your device.
88          </CardDescription>
89        </CardHeader>
90        <CardContent>
91          <Form {...form}>
92            <form
93              id="otp-form"
94              onSubmit={form.handleSubmit(onSubmit)}
95              className="space-y-6"
96            >
97              <FormField
98                control={form.control}
99                name="pin"
100                render={({ field }) => (
101// … truncated