React OTP Input
The MFA step, done properly: separate monospaced digit cells that auto-advance as you type, accept a full paste anywhere in the row, navigate with arrows, and delete backwards naturally. The first cell carries autocomplete="one-time-code" so mobile keyboards offer the SMS code. onComplete fires exactly once when the last digit lands.
Two-factor authentication
Enter the 6-digit code from your authenticator app. Paste works too.
Didn't get a code? Use a backup method
Incorrect code. 2 attempts remaining.
Installation
npx shadcn@latest add "http://localhost:3000/registry/otp-input.json"
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of digit cells |
| value | string | — | Controlled value (uncontrolled if omitted) |
| onChange | (value: string) => void | — | Fires on every edit |
| onComplete | (value: string) => void | — | Fires when all cells are filled |
| invalid | boolean | false | Error styling on all cells |
| autoFocus | boolean | false | Focus the first cell on mount |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.