Pesto UI

Input OTP

A one-time passcode field drawn as separate slots over a single real input, so paste, autofill from a text message and screen readers all work as they would on one field.

tsx
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@pestoui/core"

Six digits, two groups

maxLength is the code length; each InputOTPSlot takes the index of the character it shows. Groups and the separator are layout only.

Controlled

value and onChange carry the whole code as one string. The field accepts any character until you give it a pattern — here, digits only.

4 digits to go

Props

PropTypeDefaultDescription
maxLengthnumber—Required. The number of characters in the code.
value / onChangestring / (value: string) => void—Controlled value, as one string.
onComplete(value: string) => void—Fires when every slot is filled.
patternstring—A regular expression source the whole value must match, such as "^[0-9]+$" for digits. Without one, any character is accepted.
containerClassNamestring—On the flex row that holds the groups. className lands on the hidden input itself.
disabledboolean—Blocks input and dims the row.
indexnumber—On InputOTPSlot. Required. Which character of the value this slot shows.
PreviousInput GroupNext Kbd

Pesto UI · 117 documented components