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

InputOTPControl

InputOTPGroup

InputOTPSlot

InputOTPSeparator

InputOTPLabel