{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-otp-3","type":"registry:block","title":"OTP input with multiple separators.","description":"OTP input with multiple separators.","dependencies":[],"registryDependencies":["field","input-otp"],"files":[{"path":"c-input-otp-3.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n\nexport function Pattern() {\n  const [value, setValue] = useState(\"123456\")\n\n  return (\n    <div className=\"flex items-center justify-center\">\n      <Field>\n        <FieldLabel htmlFor=\"multi-separator\">Multi-Separator</FieldLabel>\n        <InputOTP\n          id=\"multi-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    </div>\n  )\n}","target":"components/examples/c-input-otp-3.tsx"}],"meta":{"order":3}}