Input OTP
Accessible one-time password input with copy-paste support.
Installation
npx shadcn@latest add @uqudo/input-otpUsage
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/uqudo/ui/input-otp"<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>Built on input-otp. A single invisible
<input> receives the typing and pasting; each InputOTPSlot mirrors one
character of it, so render exactly maxLength slots with index running from
0.
Examples
Pattern
Restrict the accepted characters with pattern. input-otp ships
REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS and REGEXP_ONLY_DIGITS_AND_CHARS.
Controlled
Use value and onChange to read the code as it is typed.
Enter your one-time password.
API Reference
InputOTP
Prop
Type
InputOTPSlot
Prop
Type
Sub-components
| Component | Renders | Notes |
|---|---|---|
InputOTPGroup | <div> | Joins its slots into one rounded block. |
InputOTPSeparator | <div> | A minus icon with role="separator", placed between groups. |
Data attributes
| Attribute | Element | Value |
|---|---|---|
data-slot | every part | input-otp, input-otp-group, input-otp-slot, input-otp-separator |
data-active | InputOTPSlot | true while the caret is in this slot. |