Input OTP

Accessible one-time password component with copy-paste functionality, built on input-otp. Its slots always read left-to-right, even on RTL pages, since one-time codes are digits.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/input-otp

Usage

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

Examples

Pattern

Use the pattern prop to define a custom pattern for the OTP input.

Separator

Use <InputOTPSeparator /> to add a separator between input groups.

Disabled

Use the disabled prop to disable the input.

Controlled

Use the value and onChange props to control the input value.

Invalid

Use aria-invalid on the slots to show an error state.

Four digits

A common pattern for PIN codes, using pattern={REGEXP_ONLY_DIGITS}.

Alphanumeric

Use REGEXP_ONLY_DIGITS_AND_CHARS to accept both letters and numbers.

Form

API Reference