OTP Input

One box per character for a verification code — pasting the whole code just works.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { OtpInput } from "@aile.sh/elia";

export function Example() {
  const [code, setCode] = useState("");

  return (
    <div className="flex flex-col gap-3">
      <OtpInput
        value={code}
        onChange={setCode}
        length={6}
        groupAfter={3}
        onComplete={(value) => console.log("verify", value)}
      />
      <p className="text-[11.5px] text-ink-3">
        {code.length === 6 ? "Verifying…" : `${code.length} of 6`}
      </p>
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia