shadcn.io is not affiliated with official shadcn/ui
1
2
3
4
5
6
Installation
bunx --bun shadcn@latest add https://kit.dev/r/radix/input-otp.jsonnpx shadcn@latest add https://kit.dev/r/radix/input-otp.jsonpnpm dlx shadcn@latest add https://kit.dev/r/radix/input-otp.jsonyarn shadcn@latest add https://kit.dev/r/radix/input-otp.jsonInstall the following dependencies:
bun add input-otp lucide-reactnpm install input-otp lucide-reactpnpm add input-otp lucide-reactyarn add input-otp lucide-reactCopy and paste the following code into your project.
"use client";
import { OTPInput, OTPInputContext } from "input-otp";
import { MinusIcon } from "lucide-react";
import { useContext, useState } from "react";
import type React from "react";
import { cn } from "@/lib/utils";
export const InputOTP = (
props: React.ComponentProps<typeof OTPInput> & {
containerClassName?: string;
}
) => {
const {
className,
containerClassName,
defaultValue,
onChange,Update the import paths to match your project setup.
Anatomy
InputOTP
├── InputOTPGroup
│ ├── InputOTPSlot
│ └── InputOTPSlot
├── InputOTPSeparator
└── InputOTPGroup
├── InputOTPSlot
└── InputOTPSlotUsage
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp";<InputOTP defaultValue={["1", "2", "3", "4", "5", "6"]}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>Accessibility
| Key | Description |
|---|---|
Backspace | Delete backward. |
Delete | Delete. |
ArrowLeft | Move left. |
ArrowRight | Move right. |
Enter | Activate the focused item. |
Home | Go to the start. |
End | Go to the end. |
Demos
Pattern
Digits-only OTP via type="numeric".
Separator
Separators between OTP slot groups.
Disabled
Disabled OTP with a prefilled value.
Controlled
Controlled OTP value with live feedback.
Invalid
Invalid OTP slots via aria-invalid.
Four Digits
Four-digit PIN with numeric input.
Alphanumeric
Alphanumeric OTP with a separator.
Form
Verification card with Field-wrapped OTP.
Rtl
Right-to-left field. The code stays left-to-right; the label follows the field direction.
API Reference
InputOTP
PropType
AttributeType
InputOTPGroup
PropType
AttributeType
InputOTPSlot
PropType
AttributeType
InputOTPSeparator
PropType
className?stringAttributeType