KQ-692 · OTP/CELLS

OTP Cells

Six real inputs, one digit each, that behave as one field. A paste, from the clipboard or from a value that arrives several digits at once, lands the digits in a cascade, each popping in on snap staggered by cascade(); the last digit triggers verification from a timer once the cascade has landed, and while the host holds verifying a dash runs around the last cell at a constant rate. Verified stamps a tick badge onto the last cell on recoil; failed shakes the row on a symmetric tween with no spring, clears it and returns focus to the first cell. Left and Right move, Home and End jump, Backspace clears and steps back.

KQ-692 · OTP/CELLS

Waylight Pay · confirm sign-inSent to the phone ending 4471

0 of 6

code · 0 of 6

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/otp-cells

Props

length: number; default 6; Number of cells.
value / defaultValue: string; default ""; Controlled or initial code, digits only; longer input is truncated.
onValueChange: (code: string) => void; default —; Fires from typing, paste and the clear after a failure.
onComplete: (code: string) => void; default —; Fires once from a timer after the last digit lands; re-arms when the code shrinks.
status: OtpCellsStatus; default "idle"; idle, verifying, verified or failed, set by the host once onComplete has fired.
errorMessage: string; default "That code did not match."; The alert line under the row while status is failed.
label: string; default —; Group name for assistive technology.
hint: string; default —; Visible line under the label, e.g. where the code was sent.

Prop	Type	Default	Description
length	number	6	Number of cells.
value / defaultValue	string	""	Controlled or initial code, digits only; longer input is truncated.
onValueChange	(code: string) => void	—	Fires from typing, paste and the clear after a failure.
onComplete	(code: string) => void	—	Fires once from a timer after the last digit lands; re-arms when the code shrinks.
status	OtpCellsStatus	"idle"	idle, verifying, verified or failed, set by the host once onComplete has fired.
errorMessage	string	"That code did not match."	The alert line under the row while status is failed.
label	string	—	Group name for assistive technology.
hint	string	—	Visible line under the label, e.g. where the code was sent.