OTPInput

Updated: September 14, 2026

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
/>

API reference

Prop	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

Form ControlsNumberInput

Form ControlsPasswordInput

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club