{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"input-otp-web","type":"registry:item","title":"Input OTP","description":"A segmented input for entering one-time passwords and verification codes, with each character presented in its own slot.","files":[{"path":"snippets/web/input-otp.tsx","content":"import { InputOTP, Label, Link } from \"@heroui/react\";\n\nexport function InputOtpExample() {\n  return (\n    <div className=\"flex w-[280px] flex-col gap-2\">\n      <div className=\"flex flex-col gap-1\">\n        <Label>Verify account</Label>\n        <p className=\"text-sm text-muted\">We&apos;ve sent a code to a****@gmail.com</p>\n      </div>\n      <InputOTP maxLength={6}>\n        <InputOTP.Group>\n          <InputOTP.Slot index={0} />\n          <InputOTP.Slot index={1} />\n          <InputOTP.Slot index={2} />\n        </InputOTP.Group>\n        <InputOTP.Separator />\n        <InputOTP.Group>\n          <InputOTP.Slot index={3} />\n          <InputOTP.Slot index={4} />\n          <InputOTP.Slot index={5} />\n        </InputOTP.Group>\n      </InputOTP>\n      <div className=\"flex items-center gap-[5px] px-1 pt-1\">\n        <p className=\"text-sm text-muted\">Didn&apos;t receive a code?</p>\n        <Link className=\"text-foreground\" underline=\"always\">\n          Resend\n        </Link>\n      </div>\n    </div>\n  );\n}\n","type":"registry:file","target":"~/snippets/web/input-otp.tsx"}],"author":"heroui","dependencies":["@heroui/react"]}