Command Palette

Search for a command to run...

Input OTP

shadcn/ui

Accessible one-time password component with copy paste functionality.

import {	InputOTP,	InputOTPGroup,	InputOTPSlot,} from "@/registry/optics/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>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/input-otp.json

Props

<InputOTP />
Name
Type
className
string
containerClassName
string
variant
string (default: "outline")
maxLength
number (required)
value
string
defaultValue
string
onChange
(value: string) => void
disabled
boolean
pattern
RegExp
type
"text" | "password" | "number" | "tel"

<InputOTPGroup />
Name
Type
className
string
<InputOTPSlot />
Name
Type
className
string
index
number (required)
variant
string (default: "outline")
<InputOTPSeparator />
Name
Type
className
string
Input GroupItem