A compact one line code field built on a single real input, with a blinking caret, pop-in characters and full paste support.
Check your inbox
We sent a 6-digit code to ada@fernhill.co
Code expires in 09:42
npx shadcn@latest add https://hyperblur.dev/r/otp-input-inline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/otp-input-inline.tsx.
import { OtpInputInline } from "@/components/hyperblur/otp-input-inline"
<OtpInputInline length={6} onComplete={(code) => console.log(code)} />| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of characters. |
| value | string | Controlled value. Pair with onValueChange. | |
| defaultValue | string | "" | Initial value when uncontrolled. |
| onValueChange | (value: string) => void | Called on every edit with the cleaned value. | |
| onComplete | (value: string) => void | Called once when all characters are filled. | |
| type | "numeric" | "alphanumeric" | "numeric" | Allowed characters. Alphanumeric input is uppercased. |
| mask | boolean | false | Show dots instead of characters. |
| separatorAfter | number | half the length when length is 6 or more | Draw a dash after this many segments. Use 0 for none. |
| error | boolean | false | Red border with a shake. |
| label | string | "Verification code" | Accessible name of the input. |
| name | string | Form field name of the underlying input. | |
| disabled | boolean | false | Disable the input. |
| autoFocus | boolean | false | Focus the input on mount. |
| accent | string | "#2f7bff" | Caret and focus color. |