Every MFA, email verification, and TOTP flow requires a multi-digit input that auto-advances focus, rejects non-digits, handles backspace correctly, and accepts pasted codes. Building this from a row of inputs means redoing focus management, keyboard handling (arrows, backspace, paste), and a11y labels every time—and getting the interaction details wrong breaks user trust in critical verification flows.

OtpInput is a controlled component with a value prop (string), onChange callback, length (default 6), and flags for disabled and autoFocus. It renders a flex row of single-digit inputs with inputMode="numeric", auto-advance on entry, full keyboard support (arrow navigation, backspace with fallback to previous input, paste with auto-crop), and a stable data-react-fancy-otp-input attribute on the container for agent operability.

Import from @particle-academy/react-fancy, pass your desired length (or use the default 6), and wire value + onChange to a parent state. The component handles focus advancement, numeric filtering, backspace across field boundaries, and pasted-code cropping automatically; agents can read and write the full code via the value prop.