{
  "name": "input-otp",
  "title": "Input OTP",
  "description": "A row of glass cells for one-time codes. The focused cell gets an ember ring; filled cells settle into brighter glass.",
  "category": "forms",
  "install": {
    "command": "npx shadcn@latest add @clow/input-otp",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "length": {
      "type": "number",
      "default": 6,
      "min": 4,
      "max": 8,
      "description": "Number of code characters. Must match the rendered slots."
    },
    "validationType": {
      "type": "select",
      "options": [
        "numeric",
        "alpha",
        "alphanumeric",
        "none"
      ],
      "default": "numeric"
    },
    "mask": {
      "type": "boolean",
      "default": false
    },
    "disabled": {
      "type": "boolean",
      "default": false
    }
  },
  "agent": {
    "prompt": "Use InputOTP for one-time codes: verification, 2FA, device pairing. Compose InputOTP (with a required length matching the code) > one InputOTPSlot per character, and optional InputOTPSeparator to group them. It handles paste, autofill, and per-cell focus for you. Use value + onValueChange for controlled state and onValueComplete to react when all cells are filled; set validationType for non-numeric codes and mask to hide characters. For ordinary short text, use Input instead; a lone slot is not a digit input — reach for NumberField.",
    "examples": [
      "<InputOTP length={4}><InputOTPSlot /><InputOTPSlot /><InputOTPSlot /><InputOTPSlot /></InputOTP>",
      "<InputOTP length={6} onValueComplete={(value) => verify(value)}><InputOTPSlot /><InputOTPSlot /><InputOTPSlot /><InputOTPSeparator /><InputOTPSlot /><InputOTPSlot /><InputOTPSlot /></InputOTP>"
    ]
  },
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/input-otp",
    "markdown": "https://clow.cards/llms/input-otp.md",
    "registryItem": "https://clow.cards/r/input-otp.json"
  }
}
prop	type	default
length	number	6
validationType	numeric \| alpha \| alphanumeric \| none	numeric
mask	boolean	false
disabled	boolean	false
Draw

Playground

Examples

Props
