Input OTP

PreviousNext

Accessible one-time password component with copy paste functionality.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/input-otp.json

Usage

The Input OTP component is built on top of input-otp. It is fully accessible and handles copy-paste functionality automatically.

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"
 
export function InputOTPPattern() {
  return (
    <InputOTP maxLength={6}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  )
}

Examples

Pattern

You can use the InputOTPSeparator component to create visual groups, which is common for 2FA codes (e.g. 3-3 grouping).

Pill Variant

The component comes with a secondary pill variant that renders slots as individual rounded rectangles, offering a distinct visual style from the connected default look.

Form Integration

The component integrates seamlessly with react-hook-form and zod. This example demonstrates how to validate that the input contains exactly 6 digits and only numbers.

Two-Factor Authentication
Please enter the 6-digit code sent to your device.

API Reference

InputOTP

PropTypeDefaultDescription
maxLengthnumber—The length of the OTP. Required.
containerClassNamestring—Class name for the container wrapper.
childrenReactNode—Content including groups and slots.
...propsReact.ComponentProps<typeof OTPInput>—All other props exported by input-otp.

InputOTPGroup

PropTypeDefaultDescription
classNamestring—Additional CSS classes.
childrenReactNode—Should contain InputOTPSlot components.

InputOTPSlot

PropTypeDefaultDescription
indexnumber—The 0-based index of the slot in the OTP sequence.
variant"default" | "pill""default"The visual style of the slot.
classNamestring—Additional CSS classes.

InputOTPSeparator

PropTypeDefaultDescription
childrenReactNode—Defaults to a Dot icon.