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
Props
| 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. |