Input OTP
Uses input-otp for focus, paste, and automatic advancement while styling only the visual slots with neumorphic surfaces. Multiple boxes are visible, but the accessibility tree and form value remain a single input.
@neumorphism-ui/input-otpPreview
Installation
Installation: input-otp
npx shadcn@latest add @neumorphism-ui/input-otpThe CLI resolves npm dependencies, base tokens, utilities, and component source in order.
New to this Registry? Set up the namespace before continuing.
Usage
Import
Input OTP import code
"use client";
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/ui/input-otp";Example
Input OTP usage code
export default function Example() {
return <InputOTP maxLength={6} defaultValue="123456" aria-label="Verification code">
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>;
}API Reference
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
InputOTP | maxLengthrequired | number | — | Sets the allowed verification-code length. |
InputOTP | value / defaultValue | string | — | Sets the controlled or initial uncontrolled code value. |
InputOTP | onChange | (value: string) => void | — | Runs when the complete code value changes. |
InputOTP | containerClassName | string | — | Extends the outer container that wraps slot groups. |
InputOTPSlot | indexrequired | number | — | Selects which position of the complete code this visual slot displays. |
Accessibility
- 01
Give InputOTP an aria-label or associated label that explains the verification code purpose.
- 02
Although multiple slots are visible, keep one real input instead of exposing one textbox per character.
- 03
Do not block paste or keyboard entry; connect validation errors through separate descriptive text.