Input OTP

"use client"

import {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/input-otp.json

Usage

Copyimport {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"

Copy<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Examples

With Separator

Use InputOTPSeparator to add a visual separator between groups.

"use client"

import {

Controlled

Control the input value with value and onChange.

"use client"

import * as React from "react"

Pattern

Use the pattern prop to restrict input to specific characters.

"use client"

import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"

API Reference

InputOTP

The root component that manages the OTP input state.

InputOTPGroup

Groups slots together visually.

InputOTPSlot

Individual character slot.

InputOTPSeparator

Visual separator between groups.

Credits

Built on top of input-otp by @guilhermerodz.