Go to...

Choose a page to open.

A one-time password input with one slot per character.

Input OTP

input-otp-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/input-otp.json

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp";
<InputOTP maxLength={4}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>

Examples

Separator

input-otp-separator