{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-with-numbers-only",
  "type": "registry:component",
  "title": "OTP with Numbers Only",
  "description": "A component for inputting OTP codes with numbers only",
  "registryDependencies": [
    "input-otp",
    "label"
  ],
  "files": [
    {
      "path": "registry/default/components/input/otp-with-numbers-only.tsx",
      "content": "'use client'\r\n\r\nimport {\r\n    InputOTP,\r\n    InputOTPGroup,\r\n    InputOTPSlot,\r\n} from '@/registry/default/ui/input-otp'\r\nimport { Label } from '@/registry/default/ui/label'\r\n\r\n// Change the inputLength to the desired number of slots\r\nconst inputLength = 6\r\n\r\nexport default function OtpWithNumbersOnly() {\r\n    return (\r\n        <div className=\"flex w-full max-w-4/5 flex-col gap-2\">\r\n            <Label>OTP with numbers only</Label>\r\n\r\n            <InputOTP\r\n                maxLength={inputLength}\r\n                inputMode=\"numeric\"\r\n                onChange={(e) => {\r\n                    //if value is not a number, return\r\n                    if (isNaN(Number(e))) {\r\n                        return\r\n                    }\r\n                }}\r\n            >\r\n                <InputOTPGroup>\r\n                    {Array.from({ length: inputLength }, (_, index) => (\r\n                        <InputOTPSlot key={index} index={index} />\r\n                    ))}\r\n                </InputOTPGroup>\r\n            </InputOTP>\r\n\r\n            <p className=\"text-muted-foreground text-sm\">\r\n                Built with{' '}\r\n                <a\r\n                    target=\"_blank\"\r\n                    href=\"https://input-otp.rodz.dev/\"\r\n                    className=\"underline underline-offset-3\"\r\n                >\r\n                    input-otp\r\n                </a>{' '}\r\n            </p>\r\n        </div>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/otp-with-numbers-only.tsx"
    }
  ]
}