input-otp-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp-example",
  "title": "Input OTP",
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input-otp",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-maia/examples/input-otp-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}