045
Input OTP
Formvalue: —
Customize
Length
State
Code
<InputOtp onComplete={verify} aria-label="Code" />Install
npx shadcn@latest add https://components.haedong.dev/r/input-otp.json
Props
Extends the native input props (minus value/onChange/type/maxLength). One real input sits invisibly over the cells, so the numeric keyboard, autocomplete="one-time-code", paste, form submission and screen readers all work as for a plain field; give it aria-label or put it in a Field. aria-invalid dashes every cell.
| Prop | Type | Description |
|---|---|---|
| length | number | Number of cells. Defaults to 6. |
| value / defaultValue | string | Controlled / uncontrolled value. |
| onValueChange | (value: string) => void | Every change. |
| onComplete | (value: string) => void | Once, when all cells are filled. |
| pattern | RegExp | Accepted characters. Defaults to digits. |