OTP Field

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/otp-field

UsageCopy Anchor Link

Set length to the number of characters and render that many OTPFieldInputs. Typing moves to the next slot, Backspace moves back, and pasting a code fills every slot.

import { Field, FieldLabel } from "@/components/ui/field";
import { OTPField, OTPFieldInput } from "@/components/ui/otp-field";

<Field>
  <FieldLabel>Verification code</FieldLabel>
  <OTPField length={4} onValueComplete={(code) => console.log(code)}>
    <OTPFieldInput />
    <OTPFieldInput aria-label="Character 2 of 4" />
    <OTPFieldInput aria-label="Character 3 of 4" />
    <OTPFieldInput aria-label="Character 4 of 4" />
  </OTPField>
</Field>;

AccessibilityCopy Anchor Link

Each slot is its own input. The first slot takes its name from the FieldLabel. Give the other slots an aria-label like "Character 2 of 6" so screen readers say where the user is.

With separatorCopy Anchor Link

ValidationCopy Anchor Link

onValueComplete runs when every slot is filled. Check the code there, mark the field invalid, and show a FieldError with match.

Letters and numbersCopy Anchor Link

Only digits are accepted by default. Use validationType="alphanumeric" for recovery or invite codes.

API referenceCopy Anchor Link

OTPField and OTPFieldInput wrap OTPField.Root and OTPField.Input from Base UI OTP Field and accept all their props. OTPFieldSeparator draws a short line between slot groups.