Skip to content
Forms

Input OTP

A one-time-code input with one slot per character. Focus advances as you type, a paste fills every slot, and separators are yours to place.

Sourcesrc/components/ui/input-otp.tsx

6-Digit OTP

Import

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@mikenotthepope/substrateui"

Composition

InputOTP
├── InputOTPGroup
│   └── InputOTPSlot
└── InputOTPSeparator

API Reference

PropTypeDefaultDescription
maxLengthnumber—The total number of OTP slots.
valuestring—The controlled value of the OTP input.
onChange(value: string) => void—Callback fired when the OTP value changes.