VuiAdmin

Input OTP

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

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/input-otp.tsx
Import from@viliha/vui-react/input-otp

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

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-react/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>
  );
}

InputOTP props

Plus everything React.ComponentProps<typeof OTPInput> accepts, passed straight through to the underlying element.

PropTypeDefault
containerClassName?string—

InputOTPGroup props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

InputOTPSeparator props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

InputOTPSlot props

Plus everything React.ComponentProps<"div"> accepts, passed straight through to the underlying element.

PropTypeDefault
indexnumber—