OTPInput – Once UI

OTPInput collects a one-time code as separate boxes rather than one field. It moves focus as digits are typed, accepts a pasted code into all boxes at once, and calls onComplete the moment the last one is filled.

Unlike the other inputs here it does not extend Input — it is a group of fields, not one, so it has its own small surface.

OTPInput

Verification Code

const { addToast } = useToast();

const handleComplete = (code: string) => {
  addToast({ variant: "success", message: "Submitted " + code });
};

<OTPInput
  id="verification-code"
  length={6}
  onComplete={handleComplete}
  autoFocus
/>

Screen readers and autofill

The boxes are one group, named "One-time code", and each box says which digit it is ("OTP digit 2 of 6"). The first box asks the browser for a code from a text message (autocomplete="one-time-code"), and a whole code arriving at once, by autofill or paste, fills every box. With error, every box is invalid and described by errorMessage. Name the group with aria-label, or translate both names with labels.

Translated

<OTPInput
  length={6}
  labels={{
    group: "Code de vérification",
    digit: (n, of) => `Chiffre ${n} sur ${of}`,
  }}
/>

API reference

	Type	Default
length How many digits, and so how many boxes.	number	4
onComplete Called with the full code once the last box is filled.	(code: string) => void	—
error Put the group in its error state.	boolean	false
errorMessage Message shown under the boxes when error is set.	React.ReactNode	—
disabled Block input across every box.	boolean	false
autoFocus Focus the first box on mount. Leave it off if the code is not the first thing on the page.	boolean	false
labels The group's and the boxes' accessible names, to translate them.	OTPInputLabels	—