OTPInput

draftv0.9.0·open in canvas

One-time code cells for wallet connect / verify. Paste fills from any cell; width reserved on first paint. Interior otp-input contract, CSS-only.

Installnpx shadcn add @cids/otpinput

Live demo

Paste the whole code into any cell.

Motion · tap to replay

honors reduced-motion

Border color 150ms. No `motion` package. Reduced-motion: global reset.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { OTPInput } from "@/design-system";

<OTPInput
  length={6}
  hint="Paste the whole code into any cell."
  error={rejected}
  errorMessage="That code is wrong."
  onComplete={(code) => verify(code)}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

--sell
--outline
--radius-control

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

emptyfocusedfillederrordisabled

One-time code cells for wallet connect / verify. Paste fills from any cell; width reserved on first paint. Interior otp-input contract, CSS-only.

Anatomy

┌──┐ ┌──┐ ┌──┐   ┌──┐ ┌──┐ ┌──┐
│1 │ │2 │ │3 │ · │4 │ │5 │ │6 │  ← groupEvery gap
└──┘ └──┘ └──┘   └──┘ └──┘ └──┘
hint / error (shared reserved line)

Props

Prop	Type	Default	Notes
`length`	`number`	`6`	Cell count.
`mode`	`"numeric"`	"alphanumeric"`	`"numeric"`	Allowed chars + `inputMode`.
`defaultValue`	`string`	`""`	Seed, filtered + truncated.
`onChange`	`(value: string) => void`	—	Every accepted edit.
`onComplete`	`(value: string) => void`	—	When every cell is filled.
`error`	`boolean`	`false`	`aria-invalid` on cells.
`errorMessage` / `hint`	`string`	—	Shared status line (no jump).
`label`	`string`	`"Verification code"`	Group + per-cell names.
`groupEvery`	`number`	`3`	Visual gap every N cells.
`disabled` / `autoFocus`	`boolean`	`false`	—
`className`	`string`	—	cn-merged.

Motion

· Border color 150ms. No motion package. Reduced-motion: global reset.

· role="group" + per-cell labels; one-time-code autocomplete on first cell
· Arrow / Backspace navigation; paste supported
· Status via polite live region

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.