ComponentClient component
Input OTP
An accessible one-time-code field with grouped animated slots.
Installation
Preview
2
4
0
8
1
5
Enter the code sent to your email.
Usage
tsx
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp"
<InputOTP maxLength={6}>
<InputOTPGroup>
{Array.from({ length: 6 }, (_, index) => (
<InputOTPSlot index={index} key={index} />
))}
</InputOTPGroup>
</InputOTP>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
maxLength | number | — | Required maximum code length. |
pattern | string | — | Restricts accepted characters. |
className | string | — | Overrides or extends the generated Tailwind classes. |
disabled | boolean | false | Prevents user interaction when supported. |