Input OTP

The input OTP is a fixed-length code entry built from individual character slots backed by one hidden input. Use it for one-time passwords, verification codes, and PINs where each character gets its own box. It is built on the input-otp library; for a Base UI version with field labeling and validation, use OTPField instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/input-otp

Usage

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

<InputOTP>
  <InputOTPGroup>
    <InputOTPSlot />
  </InputOTPGroup>
</InputOTP>

Composition

InputOTP
└── InputOTPGroup
    ├── InputOTPSlot
    └── InputOTPSeparator

Use multiple InputOTPGroup blocks with an InputOTPSeparator between them to split the code into visual chunks.

Examples

With Separator

Place an InputOTPSeparator between two InputOTPGroup blocks to split the code.

Custom Pattern

Use pattern to restrict which characters each slot accepts.

Custom Styling

Pass className to InputOTPSlot to restyle the slots.

Disabled

Set disabled on InputOTP to block interaction.

Elevated Variant

Use variant="elevated" on each InputOTPSlot for translucent slots that adapt to a Card, Dialog, or popover surface. See the Surfaces docs.

Accessibility

The slots render the visible boxes, but text entry happens in a single hidden input that spans the group, so the code stays selectable, pasteable, and reachable by autofill. Set maxLength to the code length, and pass aria-invalid="true" on InputOTP to flag a rejected code.

API Reference

Props

InputOTPSlot