GitHub
DocsInput OTP

Input OTP

Accessible one-time password input with copy-paste support.

Preview

6-digit OTP

4-digit PIN

Installation

npx shadcn@latest add input-otp

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} 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>

Props

maxLength — total number of OTP digits

value — controlled OTP string

onChange — callback fired with updated string

pattern — regex pattern to restrict input (e.g. digits only)

disabled — disables all slots

Toggle GroupCalendar