Vui Starter
npm

Input OTP

Input OTP is an accessible one-time-password field with per-digit boxes and paste support.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/input-otp.

Usage

Group slots however you like and drop an InputOTPSeparator between groups. The caret animation ships in theme.css.

input-otp-demo.tsx
import {
  InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator,
} from "@viliha/vui-ui/input-otp";

export function Example() {
  const [value, setValue] = React.useState("");
  return (
    <InputOTP maxLength={6} value={value} onChange={setValue}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  );
}