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

npx shadcn@latest add @intentui/input-otp

Manual installation

npm i input-otp @intentui/icons

Anatomy

import { InputOTP } from "@/components/ui/input-otp"

<InputOTP maxLength={6}>
  <InputOTP.Group>
    <InputOTP.Slot index={0} />
    <InputOTP.Slot index={1} />
    <InputOTP.Slot index={2} />
  </InputOTP.Group>
  <InputOTP.Separator />
  <InputOTP.Group>
    <InputOTP.Slot index={3} />
    <InputOTP.Slot index={4} />
    <InputOTP.Slot index={5} />
  </InputOTP.Group>
</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.