Docs
Input OTP
Input OTP
Accessible one-time password component with copy paste functionality.
About
Input OTP is built on top of input-otp by @guilherme_rodz.
Installation
Run the following command:
npx shadcn-ui@latest add input-otpUpdate tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
"caret-blink": {
"0%,70%,100%": { opacity: "1" },
"20%,50%": { opacity: "0" },
},
},
animation: {
"caret-blink": "caret-blink 1.25s ease-out infinite",
},
},
},
}Usage
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/ui/input-otp"<InputOTP
maxLength={6}
render={({ slots }) => (
<>
<InputOTPGroup>
{slots.slice(0, 3).map((slot, index) => (
<InputOTPSlot key={index} {...slot} />
))}{" "}
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
{slots.slice(3).map((slot, index) => (
<InputOTPSlot key={index} {...slot} />
))}
</InputOTPGroup>
</>
)}
/>Examples
Pattern
Use the pattern prop to define a custom pattern for the OTP input.
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
...
<InputOTP
maxLength={6}
pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
render={({ slots }) => (
<InputOTPGroup>
{slots.map((slot, index) => (
<InputOTPSlot key={index} {...slot} />
))}{" "}
</InputOTPGroup>
)}
/>Separator
You can use the <InputOTPSeparator /> component to add a separator between the input groups.
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/registry/new-york/ui/input-otp"
...
<InputOTP
maxLength={6}
render={({ slots }) => (
<InputOTPGroup className="gap-2">
{slots.map((slot, index) => (
<React.Fragment key={index}>
<InputOTPSlot className="rounded-md border" {...slot} />
{index !== slots.length - 1 && <InputOTPSeparator />}
</React.Fragment>
))}{" "}
</InputOTPGroup>
)}
/>Controlled
You can use the value and onChange props to control the input value.
Enter your one-time password.