Input OTP

Introduction

The Input OTP component is a versatile and customizable component that allows you to easily create an OTP input field. It offers a range of features, including customizable separators, validation, and more. Shoutout to Guilherme Rodz for creating this amazing component.

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/input-otp

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install input-otp @heroicons/react tailwind-merge

Anatomy

import { Description } from "@/components/ui/field"
import {
  InputOTP,
  InputOTPControl,
  InputOTPGroup,
  InputOTPLabel,
  InputOTPSlot,
} from "@/components/ui/input-otp"

<InputOTP maxLength={6}>
  <InputOTPLabel>Code</InputOTPLabel>
  <InputOTPControl>
    <InputOTPGroup>
      {[...Array(6)].map((_, index) => (
        <InputOTPSlot key={index} index={index} />
      ))}
    </InputOTPGroup>
  </InputOTPControl>
  <Description>Please enter the 6-digit code we sent to your email.</Description>
</InputOTP>

Examples

Separator

To include a separator between the OTP input groups, use the InputOTPSeparator component.

Controlled

To control the Input OTP component, utilize the value and onChange props.

Component API

InputOTP

The InputOTP component renders the OTP input root.

InputOTPControl

The InputOTPControl component wraps OTP input slots.

InputOTPGroup

The InputOTPGroup component groups OTP slots.

InputOTPSlot

The InputOTPSlot component renders one OTP input slot.

InputOTPSeparator

The InputOTPSeparator component renders a separator between OTP groups.

InputOTPLabel

The InputOTPLabel component renders the OTP input label.

See the Input OTP documentation for the full API reference.