# input-otp
**One invisible input, any UI you can imagine.**
The accessible, unstyled, fully featured one-time-password component for React.
[](https://www.npmjs.com/package/input-otp)
[](https://www.npmjs.com/package/input-otp)
[](https://bundlephobia.com/package/input-otp)
[](./LICENSE)
[**Documentation**](https://input-otp.rodz.dev/docs) Β· [Examples](https://input-otp.rodz.dev/docs/examples) Β· [API](https://input-otp.rodz.dev/docs/api) Β· [Edge cases](https://input-otp.rodz.dev/docs/edge-cases)
Diamond Sponsor π
Clerk β the easiest way to add authentication to your application
Hero Sponsors
Evomi β residential proxies from $0.49Rapidproxy β residential proxies from $0.55
## Why
HTML has no one-time-password control. There is no `` that focuses it
- **Unstyled** β no theme, no class names to override, no CSS to import
- **Small** β zero dependencies, React 16.8 β 19 (see the size badge above)
## Install
```bash
npm install input-otp
```
## Usage
`maxLength` is the number of slots. `render` receives them and returns your
markup β that's the whole contract.
```tsx
'use client'
import { OTPInput } from 'input-otp'
export function VerificationCode() {
return (
(
{slots.map((slot, idx) => (
)}
/>
)
}
```
Each slot tells you what to draw:
```tsx
import type { SlotProps } from 'input-otp'
function Slot({ char, placeholderChar, isActive, hasFakeCaret }: SlotProps) {
return (
{char ?? placeholderChar}
{hasFakeCaret &&
)
}
```
> The full, copy-pasteable slot component (with the caret keyframe and the
> Stripe-style dash) is in
> [**Installation**](https://input-otp.rodz.dev/docs/installation).
### Using shadcn/ui?
shadcn/ui's `input-otp` component wraps this library with pre-composed parts.
Same engine, `` stylesheet turns the input back into a plain visible one |
Each of these β and a dozen more β is written up with the reasoning and the exact
code in [**Edge cases**](https://input-otp.rodz.dev/docs/edge-cases).
## Documentation
| | |
| ---------------------------------------------------------------------- | --------------------------------------------------------------- |
| [Introduction](https://input-otp.rodz.dev/docs) | Why one input, and what you write |
| [Installation](https://input-otp.rodz.dev/docs/installation) | Install, first render, a slot component to copy |
| [Anatomy](https://input-otp.rodz.dev/docs/anatomy) | X-ray the field and watch the selection algorithm run live |
| [Styling](https://input-otp.rodz.dev/docs/styling) | Slots, carets, placeholders, groups, data attributes |
| [Validation](https://input-otp.rodz.dev/docs/validation) | `pattern`, `pasteTransformer`, `inputMode` |
| [Forms](https://input-otp.rodz.dev/docs/forms) | Controlled values, auto-submit, react-hook-form, server actions |
| [Accessibility](https://input-otp.rodz.dev/docs/accessibility) | Labelling, keyboard, what a screen reader hears |
| [Password managers](https://input-otp.rodz.dev/docs/password-managers) | How badge detection works β **with a live simulator** |
| [Mobile & platforms](https://input-otp.rodz.dev/docs/mobile) | SMS autofill, iOS quirks, autofill styling, no-JS |
| [API reference](https://input-otp.rodz.dev/docs/api) | Every prop, render prop, data attribute and export |
| [Examples](https://input-otp.rodz.dev/docs/examples) | A gallery of finished fields to copy |
| [Troubleshooting](https://input-otp.rodz.dev/docs/troubleshooting) | The questions that come up most |
## API at a glance
```ts
type OTPInputProps = {
maxLength: number // number of slots β required
render?: (props: RenderProps) => React.ReactNode
children?: React.ReactNode // β¦or compose and read OTPInputContext
value?: string
onChange?: (newValue: string) => unknown // a string, not an event
onComplete?: (...args: any[]) => unknown // fires once, on the transition to full;
// receives the value as a string (narrows in 2.0)
pattern?: string | RegExp // gates every change; no default
placeholder?: string // per-slot placeholder characters
pasteTransformer?: (pasted: string) => string
containerClassName?: string // the visible wrapper
// className goes to the invisible input
textAlign?: 'left' | 'center' | 'right' // default 'left'
inputMode?: 'numeric' | 'text' | ... // default 'numeric'
pushPasswordManagerStrategy?: 'increase-width' | 'none'
noScriptCSSFallback?: string | null
nonce?: string // for CSP style-src β applied to the injected 
