KQ-023 · CODE/CELLS

Code Cells

Six digits, dropped into place — one hidden one-time-code input drives visual cells with digit drops, underline ticks, and a rejection nudge.

KQ-023 · CODE/CELLS

Pair field unit

Demo code · 314159

Install

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

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

length: number; default 6; Cell count; also the hidden input's maxLength.
value / defaultValue / onValueChange: string / string / (code) => void; default —; Controlled or uncontrolled code, digits only.
onComplete: (code: string) => void; default —; Fires once per fill; re-arms when the code shrinks.
error / errorMessage: boolean / string; default —; Destructive borders plus a row nudge and a role=alert line.
groups: number[]; default —; e.g. [3,3] renders a separator between digit groups.
ref: Ref<HTMLInputElement>; default —; Reaches the hidden input — focus() after clearing.

Prop	Type	Default	Description
length	number	6	Cell count; also the hidden input's maxLength.
value / defaultValue / onValueChange	string / string / (code) => void	—	Controlled or uncontrolled code, digits only.
onComplete	(code: string) => void	—	Fires once per fill; re-arms when the code shrinks.
error / errorMessage	boolean / string	—	Destructive borders plus a row nudge and a role=alert line.
groups	number[]	—	e.g. [3,3] renders a separator between digit groups.
ref	Ref<HTMLInputElement>	—	Reaches the hidden input — focus() after clearing.