Input OTP

A segmented input for one-time passcodes.

Updated 2026-06-04

Six digits

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

A segmented input for one-time passcodes.

Installation

railbase ui add input-otp

Note

railbase ui add also copies shared primitives — they ship alongside this component automatically.

Usage

import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/lib/ui/input-otp";

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

Anatomy

Exported parts: InputOTP · InputOTPGroup · InputOTPSlot · InputOTPSeparator · OtpField