Preview
-
Installation
<> import.ts
import { InputOTP } from "@/components/ui/input-otp"Code
<> component.tsx
import { InputOTP } from "@/components/ui/input-otp"
<InputOTP />API Reference
InputOTP
One-time passcode input with grouping, paste, and keyboard navigation.
<> import.ts
import { InputOTP, InputOTPPresets } from "@/components/ui/input-otp"Props
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of digits |
value | string | — | Controlled OTP value |
onChange | (value: string) => void | — | Called with OTP on change |
className | string | "" | Additional CSS classes |
size | "sm" | "md" | "lg" | "md" | Input size |
disabled | boolean | false | Disable inputs |
autoFocus | boolean | true | Focus first input on mount |
Presets
small4 digits, small size
medium6 digits, medium size
large8 digits, large size