Input OTP
View on shadcn/uiAccessible one-time password component with copy paste functionality.
Installation
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/input-otp.jsonUsage
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp";<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>Examples
With separator
Add visual separators to group digits.
Controlled
Control the input value with state.
Enter your verification code
API reference
This component is built on top of input-otp. For additional features and customization options, refer to the input-otp documentation.