Input OTP

A one-time code, a character to a cell: small slanted wells of Input's, each holding one tall leaning character.

Install

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/input-otp

Examples

Four characters, and six in two runs

Gate code

Four characters, on the back of the crate.

Sign-off code

input-otp-code.tsx

import { Field, FieldDescription, FieldLabel } from "@/components/zero/field";import {  InputOTP,  InputOTPSeparator,  InputOTPSlot,} from "@/components/zero/input-otp";export default function InputOTPCode() {  return (    <div className="grid gap-8">      <Field>        <FieldLabel>Gate code</FieldLabel>        <InputOTP length={4} validationType="alphanumeric" />        <FieldDescription>          Four characters, on the back of the crate.        </FieldDescription>      </Field>      <Field>        <FieldLabel>Sign-off code</FieldLabel>        <InputOTP length={6}>          <InputOTPSlot />          <InputOTPSlot aria-label="Character 2 of 6" />          <InputOTPSlot aria-label="Character 3 of 6" />          <InputOTPSeparator />          <InputOTPSlot aria-label="Character 4 of 6" />          <InputOTPSlot aria-label="Character 5 of 6" />          <InputOTPSlot aria-label="Character 6 of 6" />        </InputOTP>      </Field>    </div>  );}

Behaviour

Typing moves to the next cell, Backspace moves back, and pasting fills the row. The cell being typed in draws the selection frame; inside an invalid Field the cells outline in danger. Digits only by default; validationType takes letters too.

Without children, InputOTP draws length cells; with InputOTPSlot and InputOTPSeparator you can split them into runs. Name it with a FieldLabel inside a Field (or a label pointing at its id): the first cell takes that name, the others say which character they hold.

Props

InputOTP

Prop	Type	Default	Description
length	number	—	How many characters.
validationType	"numeric" \| "alpha" \| "alphanumeric" \| "none"	"numeric"	What a cell accepts.
onValueComplete	(value) => void	—	Called when every cell is filled.

Also takes every prop of Base UI's OTPField.Root.

InputOTPSlot, InputOTPSeparator

Also takes every prop of Base UI's OTPField.Input.