ui
GitHub

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.json

Usage

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