{
  "title": "InputOTP",
  "description": "Segmented one-time-code input with auto-advance, backspace backtrack, and paste-to-fill. Works cross-platform.",
  "url": "/docs/components/input-otp",
  "since": "0.9.0",
  "tags": [
    "form",
    "input",
    "otp"
  ],
  "platform": "both",
  "source": "---\ntitle: InputOTP\ndescription: Segmented one-time-code input with auto-advance, backspace backtrack, and paste-to-fill. Works cross-platform.\nsince: 0.9.0\ntags: [form, input, otp]\nplatform: both\ncategory: forms\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Callout } from 'fumadocs-ui/components/callout';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"InputOTP\" />\n\n## At a glance\n\n- Renders `length` (default 6) individual text cells in a row.\n- Auto-advances focus to the next cell on character entry.\n- Backspace on an empty cell moves focus to the previous cell.\n- Paste of a full code distributes characters across all cells.\n- `onComplete` fires once all cells are filled.\n- `pattern=\"numeric\"` (default) or `pattern=\"alphanumeric\"`.\n- Field.Control-compatible: forwards `id`, `aria-labelledby`, `aria-describedby`, `aria-invalid`.\n\n## Preview\n\n<Preview name=\"input-otp-basic\" />\n\n## Usage\n\n```tsx\nimport { useState } from 'react';\nimport { InputOTP } from '@nori-ui/core';\n\nexport function OTPForm() {\n    const [code, setCode] = useState('');\n\n    return (\n        <InputOTP\n            value={code}\n            onChange={setCode}\n            onComplete={(value) => console.log('Submit:', value)}\n            length={6}\n        />\n    );\n}\n```\n\n## With Field\n\n```tsx\nimport { Field, InputOTP } from '@nori-ui/core';\n\nexport function OTPField() {\n    return (\n        <Field>\n            <Field.Label>Verification code</Field.Label>\n            <Field.Control>\n                <InputOTP length={6} />\n            </Field.Control>\n            <Field.Description>Enter the 6-digit code from your authenticator app.</Field.Description>\n        </Field>\n    );\n}\n```\n\n## Alphanumeric\n\n```tsx\n<InputOTP\n    value={code}\n    onChange={setCode}\n    length={8}\n    pattern=\"alphanumeric\"\n/>\n```\n\n## Platform notes\n\n<Callout type=\"info\">\n**Web:** Each cell is an `<input>` element. The component handles `onKeyDown` for arrow navigation, backspace, and character entry. Paste is captured on the container `div` via `onPaste`.\n</Callout>\n\n<Callout type=\"info\">\n**Native:** Each cell is an RN `TextInput`. Backspace is detected via `onKeyPress`. Paste is handled by detecting multi-character `onChangeText` input.\n</Callout>\n\n## Additional props\n\n- `disabled` — prevents all input, dims the cells, and forwards `aria-disabled`.\n- `placeholder` — single character shown inside each empty cell as a hint (e.g., `\"·\"`). Defaults to no placeholder.\n- `autoFocus` — focuses the first cell on mount.\n- `aria-label` — accessible label for the control when no visible label is present (e.g., when used outside a `<Field>`).\n\n## Props\n\n<PropsTable component=\"InputOTP\" />\n"
}