Skip to content
aq-ui
Back to ComponentsComponent

Input Otp

Open-code aq-ui accessible component family for Input Otp.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add input-otp

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

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

<InputOTP />

InputOTP

constSource L9

Open-code aq-ui accessible component family for Input Otp.

const InputOTP = React.forwardRef<React.ComponentRef<typeof OTPInput>, React.ComponentProps<typeof OTPInput> & { containerClassName?: string }>(…)
Props type
React.ComponentProps<typeof OTPInput> & { containerClassName?: string }

Props

NameType
containerClassName?string
<InputOTP />

InputOTPGroup

constSource L31

Public const export from Input Otp.

const InputOTPGroup = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<InputOTPGroup />

InputOTPSeparator

constSource L80

Public const export from Input Otp.

const InputOTPSeparator = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<InputOTPSeparator />

InputOTPSlot

constSource L49

Public const export from Input Otp.

const InputOTPSlot = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & { index: number }>(…)
Props type
React.ComponentProps<"div"> & { index: number }

Props

NameType
indexnumber
<InputOTPSlot />

Registry dependencies

utils

Package dependencies

input-otp@^1.4.2, lucide-react@^1.31.0

Files

  • components/ui/input-otp.tsx

Source