Input OTP

1"use client"
2 
3import * as React from "react"
4import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
5 
6import {
7  Example,
8  ExampleWrapper,
9} from "@/registry/bases/radix/components/example"
10import { Button } from "@/registry/bases/radix/ui/button"
11import {
12  Card,
13  CardContent,
14  CardDescription,
15  CardFooter,
16  CardHeader,
17  CardTitle,
18} from "@/registry/bases/radix/ui/card"
19import {
20  Field,
21  FieldDescription,
22  FieldError,
23  FieldLabel,
24} from "@/registry/bases/radix/ui/field"
25import {
26  InputOTP,
27  InputOTPGroup,
28  InputOTPSeparator,
29  InputOTPSlot,
30} from "@/registry/bases/radix/ui/input-otp"
31import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
32 
33export default function InputOTPExample() {
34  return (
35    <ExampleWrapper>
36      <InputOTPForm />
37      <InputOTPSimple />
38      <InputOTPPattern />
39      <InputOTPWithSeparator />
40      <InputOTPAlphanumeric />
41      <InputOTPDisabled />
42      <InputOTPFourDigits />
43      <InputOTPInvalid />
44    </ExampleWrapper>
45  )
46}
47 
48function InputOTPSimple() {
49  return (
50    <Example title="Simple">
51      <Field>
52        <FieldLabel htmlFor="simple">Simple</FieldLabel>
53        <InputOTP id="simple" maxLength={6}>
54          <InputOTPGroup>
55            <InputOTPSlot index={0} />
56            <InputOTPSlot index={1} />
57            <InputOTPSlot index={2} />
58          </InputOTPGroup>
59          <InputOTPSeparator />
60          <InputOTPGroup>
61            <InputOTPSlot index={3} />
62            <InputOTPSlot index={4} />
63            <InputOTPSlot index={5} />
64          </InputOTPGroup>
65        </InputOTP>
66      </Field>
67    </Example>
68  )
69}
70 
71function InputOTPPattern() {
72  return (
73    <Example title="Digits Only">
74      <Field>
75        <FieldLabel htmlFor="digits-only">Digits Only</FieldLabel>
76        <InputOTP id="digits-only" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
77          <InputOTPGroup>
78            <InputOTPSlot index={0} />
79            <InputOTPSlot index={1} />
80            <InputOTPSlot index={2} />
81            <InputOTPSlot index={3} />
82            <InputOTPSlot index={4} />
83            <InputOTPSlot index={5} />
84          </InputOTPGroup>
85        </InputOTP>
86      </Field>
87    </Example>
88  )
89}
90 
91function InputOTPWithSeparator() {
92  const [value, setValue] = React.useState("123456")
93 
94  return (
95    <Example title="With Separator">
96      <Field>
97        <FieldLabel htmlFor="with-separator">With Separator</FieldLabel>
98        <InputOTP
99          id="with-separator"
100// … truncated