Input OTP

A component for entering OTP codes.

Docs
input-otp-demo.tsx
import {
	InputOTP,
	InputOTPGroup,
	InputOTPSeparator,
	InputOTPSlot,
} from "@/components/ui/input-otp"
 
export function InputOTPDemo() {
	return (
		<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>
	)
}

About

The Input OTP is built on top of input-otp, which is created by @guilherme_rodz.

Installation

npx shadcn@latest add https://9ui.dev/r/input-otp

Usage

Imports
import {
	InputOTP,
	InputOTPGroup,
	InputOTPSeparator,
	InputOTPSlot,
} from "@/components/ui/input-otp"
Anatomy
<InputOTP>
	<InputOTPGroup>
		<InputOTPSlot />
	</InputOTPGroup>
	<InputOTPSeparator />
</InputOTP>

Examples

Custom

input-otp-custom.tsx
import {
	InputOTP,
	InputOTPGroup,
	InputOTPSlot,
} from "@/components/ui/input-otp"
 
export function InputOTPDemo() {
	return (
		<InputOTP maxLength={4}>
			<InputOTPGroup className="gap-0">
				<InputOTPSlot className="rounded-r-none" index={0} />
				<InputOTPSlot className="rounded-none border-x-0" index={1} />
				<InputOTPSlot className="rounded-none border-r-0" index={2} />
				<InputOTPSlot className="rounded-l-none" index={3} />
			</InputOTPGroup>
		</InputOTP>
	)
}