OTP input

Multi-box numeric code entry with auto-advance, backspace navigation, and paste support.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Enter the 6-digit code sent to your device. (Try all zeros to trigger invalid state.)

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { OtpInput } from "@payglocal_ui/flux-ui";

Example

const [otp, setOtp] = useState("");

<OtpInput
  value={otp}
  onChange={setOtp}
  length={6}
  onComplete={(code) => console.log("done", code)}
/>