Input OTP

A composable OTP (one-time password) input built on the input-otp library. It renders individual character slots grouped together, with optional separators between groups. Supports focus management, fake caret animation, and validation states.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

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

export default 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>
  )
}

Anatomy

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>

Examples

Basic 6-digit OTP

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

With separator

Use InputOTPSeparator to visually divide slot groups, such as a 3-3 pattern.

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

4-digit PIN

<InputOTP maxLength={4}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>

API Reference

InputOTP

The root input component. Wraps OTPInput from input-otp.

Prop	Type	Default	Description
`maxLength`	`number`	—	The total number of OTP characters.
`value`	`string`	—	Controlled value.
`onChange`	`(value: string) => void`	—	Callback when the value changes.
`containerClassName`	`string`	—	Class name applied to the outer container `<div>`.
`className`	`string`	—	Class name applied to the hidden `<input>` element.

InputOTPGroup

A <div> that groups consecutive InputOTPSlot components with connected borders.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

InputOTPSlot

A single character slot. Reads its state (character, active, caret) from OTPInputContext using the provided index.

Prop	Type	Default	Description
`index`	`number`	—	The zero-based index of this slot within the OTP input.
`className`	`string`	—

InputOTPSeparator

A visual separator between slot groups. Renders a dash icon by default.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—