Skip to content
← Inventory

InputOTP

One-time password input component for verification codes.

Usage

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

Best practices

  • Set maxLength to the code length and render exactly that many InputOTPSlots (index 0…n-1) — a slot whose index exceeds maxLength never fills.

  • Drive it controlled with value/onChange (a plain string), then verify the code once the string reaches full maxLength.

  • Split slots into InputOTPGroups with an InputOTPSeparator between them for visual grouping only — it does not change the underlying value.

Props

PropTypeDefaultDescription
index(required)number

Position in the OTP value this slot renders; its char/caret/active state is read from context by this index.

Also exports

  • componentInputOTP
  • componentInputOTPGroup
  • componentInputOTPSeparator