Input OTP

An OTP input takes a short code, such as a one-time password, and shows each character in a slot of its own. A single invisible input covers the slots, so users type, paste and autofill the code as one value. A group joins its slots into one block, and a separator divides two groups.

UsageCopy Anchor Link

import {
	InputOTP,
	InputOTPGroup,
	InputOTPSlot,
} from "@biem/ui/components/ui/input-otp";

export function InputOTPDefault() {
	return (
		<InputOTP maxLength={6} aria-label="Pickup code">
			<InputOTPGroup>
				<InputOTPSlot index={0}/>
				<InputOTPSlot index={1}/>
				<InputOTPSlot index={2}/>
				<InputOTPSlot index={3}/>
				<InputOTPSlot index={4}/>
				<InputOTPSlot index={5}/>
			</InputOTPGroup>
		</InputOTP>
	);
}

ExamplesCopy Anchor Link

With SeparatorCopy Anchor Link

Codes are easier to read and compare in short parts, the way they often appear on a receipt or a returns label. Between two groups, an InputOTPSeparator marks where one part ends and the next begins. Users still enter the code in one go, and the separator never becomes part of its value.

Digits OnlyCopy Anchor Link

One-time codes sent by text message usually consist of digits alone. Restricted to digits through pattern, the input rejects every other character, whether users type it or paste it. Touch devices show a numeric keyboard, the default of inputMode.

Letters and DigitsCopy Anchor Link

Some codes combine letters and digits, such as the reference of a return or a stock transfer. Once pattern allows both, users can enter either, and inputMode set to "text" gives touch devices a full keyboard, since the numeric keyboard of the default offers no letters.

ControlledCopy Anchor Link

The application can also take charge of the code, for example to fill in a code it already knows or to clear the code after a failed attempt. Through value and onChange it holds the code, so other parts of the interface can read or reset it as well.

DisabledCopy Anchor Link

Entering a code is sometimes not possible yet, for example while the previous attempt is still being checked. Marked as disabled, the input accepts no characters and exposes its state to assistive technology, while users still see where the code will go.

InvalidCopy Anchor Link

A code that has expired or does not match needs to stand out as wrong before users try again. On the input, aria-invalid reports the error to assistive technology, and on every slot it marks the code as rejected, while the input stays ready for a new attempt.

API ReferenceCopy Anchor Link

InputOTPCopy Anchor Link

InputOTPGroupCopy Anchor Link

InputOTPGroup holds a row of slots and joins them into one block. It renders a div and has no props of its own.

InputOTPSlotCopy Anchor Link

InputOTPSeparatorCopy Anchor Link

InputOTPSeparator places a dash between two groups. It renders a div with the role separator and has no props of its own.