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.

Basic

Here’s the basic usage of the Input OTP 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

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>

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.