snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/aria/input-otp-form.tsx

@@ -0,0 +1,81 @@
+import { RefreshCwIcon } from "lucide-react"
+
+import { Button } from "@/styles/aria-nova/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/styles/aria-nova/ui/card"
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+} from "@/styles/aria-nova/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/styles/aria-nova/ui/input-otp"
+
+export function InputOTPForm() {
+  return (
+    <Card className="mx-auto max-w-md">
+      <CardHeader>
+        <CardTitle>Verify your login</CardTitle>
+        <CardDescription>
+          Enter the verification code we sent to your email address:{" "}
+          <span className="font-medium">m@example.com</span>.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Field>
+          <div className="flex items-center justify-between">
+            <FieldLabel htmlFor="otp-verification">
+              Verification code
+            </FieldLabel>
+            <Button variant="outline" size="xs">
+              <RefreshCwIcon />
+              Resend Code
+            </Button>
+          </div>
+          <InputOTP maxLength={6} id="otp-verification" required>
+            <InputOTPGroup className="*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+              <InputOTPSlot index={0} />
+              <InputOTPSlot index={1} />
+              <InputOTPSlot index={2} />
+            </InputOTPGroup>
+            <InputOTPSeparator className="mx-2" />
+            <InputOTPGroup className="*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+              <InputOTPSlot index={3} />
+              <InputOTPSlot index={4} />
+              <InputOTPSlot index={5} />
+            </InputOTPGroup>
+          </InputOTP>
+          <FieldDescription>
+            <a href="#">I no longer have access to this email address.</a>
+          </FieldDescription>
+        </Field>
+      </CardContent>
+      <CardFooter>
+        <Field>
+          <Button type="submit" className="w-full">
+            Verify
+          </Button>
+          <div className="text-sm text-muted-foreground">
+            Having trouble signing in?{" "}
+            <a
+              href="#"
+              className="underline underline-offset-4 transition-colors hover:text-primary"
+            >
+              Contact support
+            </a>
+          </div>
+        </Field>
+      </CardFooter>
+    </Card>
+  )
+}