Get Started
Input
Feedback
Display
Installation
i18n
1
2
3
4
5
6
import {
InputOTP,
InputOTPGroup,About#
Input OTP is built on top of input-otp by @guilherme_rodz.
Installation#
pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/input-otp.jsonnpx shadcn@latest add https://ui.tyap.me/r/styles/base/input-otp.jsonyarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/input-otp.jsonbunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/input-otp.json
Install the following dependencies:
pnpm add input-otpnpm install input-otpyarn add input-otpbun add input-otp
Copy and paste the following code into your project.
"use client"
import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { useShakeOnInvalid } from "@/hooks/use-shake-on-invalid"
import { cn } from "@/lib/utils"
import { MinusIcon } from "lucide-react"
function InputOTP({
className,
containerClassName,
...props
}: React.ComponentProps<typeof OTPInput> & {
containerClassName?: string
}) {
return (
<OTPInput
data-slot="input-otp"
containerClassName={cn(
"cn-input-otp flex items-center has-disabled:opacity-50",
containerClassName
)}
spellCheck={false}
className={cn(
"disabled:cursor-not-allowed",
className
)}
{...props}
/>
)
}
function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
const ref = React.useRef<HTMLDivElement>(null)
useShakeOnInvalid(ref)
return (
<div
ref={ref}
data-slot="input-otp-group"
className={cn("t-input flex items-center", className)}
{...props}
/>
)
}
function InputOTPSlot({
index,
className,
...props
}: React.ComponentProps<"div"> & {
index: number
}) {
const inputOTPContext = React.useContext(OTPInputContext)
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
return (
<div
data-slot="input-otp-slot"
data-active={isActive}
className={cn(
"relative flex items-center justify-center data-[active=true]:z-10",
className
)}
{...props}
>
{char}
{hasFakeCaret && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="" />
</div>
)}
</div>
)
}
function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="input-otp-separator"
className="flex items-center"
role="separator"
{...props}
>
<MinusIcon
/>
</div>
)
}
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
Update the import paths to match your project setup.
Usage#
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/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>Composition#
Use the following composition to build an InputOTP:
InputOTP
├── InputOTPGroup
│ ├── InputOTPSlot
│ ├── InputOTPSlot
│ └── InputOTPSlot
├── InputOTPSeparator
├── InputOTPGroup
│ ├── InputOTPSlot
│ ├── InputOTPSlot
│ └── InputOTPSlot
├── InputOTPSeparator
└── InputOTPGroup
├── InputOTPSlot
└── InputOTPSlotPattern#
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}>
...
</InputOTP>"use client"
import { REGEXP_ONLY_DIGITS } from "input-otp"Examples#
Separator#
Use the <InputOTPSeparator /> component to add a separator between input groups.
import {
InputOTP,
InputOTPGroup,Disabled#
Use the disabled prop to disable the input.
1
2
3
4
5
6
import { Field, FieldLabel } from "@/components/ui/field"
import {
InputOTP,Controlled#
Use the value and onChange props to control the input value.
Enter your one-time password.
"use client"
import * as React from "react"Invalid#
Use aria-invalid on the slots to show an error state.
0
0
0
0
0
0
"use client"
import * as React from "react"Four Digits#
A common pattern for PIN codes. This uses the pattern={REGEXP_ONLY_DIGITS} prop.
"use client"
import { REGEXP_ONLY_DIGITS } from "input-otp"Alphanumeric#
Use REGEXP_ONLY_DIGITS_AND_CHARS to accept both letters and numbers.
"use client"
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"Form#
Verify your login
Enter the verification code we sent to your email address: m@example.com.
Having trouble signing in? Contact support
import { RefreshCwIcon } from "lucide-react"
import { Button } from "@/components/ui/button"RTL#
To enable RTL support in shadcn/ui, see the RTL configuration guide.
1
2
3
4
5
6
"use client"
import * as React from "react"API Reference#
See the input-otp documentation for more information.