Try 123456, or any other code to see the error

OTP Input

A one-time code input that grows out of a button and settles into a verified badge.

Dependencies

motionlucide-reactreact-use-measure

Installation

npx shadcn@latest add ikislay/pixel-ui/otp-input

How to use

import { OtpInput } from "@/components/ui/otp-input";

export default function Demo() {
  return (
    <OtpInput
      onVerify={async (code) => {
        const res = await fetch("/api/verify", {
          method: "POST",
          body: JSON.stringify({ code }),
        });
        return res.ok;
      }}
    />
  );
}

Source Code

1// Loading…

Props

Options you can pass to customize this component.

Prop

Type

Description

onVerify

(code: string) => boolean | Promise<boolean>

Runs once every slot is filled. Return true to show Verified, or false to reject the code. A thrown error counts as false. Without it, every code passes.

length

number

How many digits the code has.

label

string

Text of the button shown before the slots open.

className

string

Classes applied to the root element.