Input OTP
One cell per character of a verification code.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Input OTP
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/input-otp.json'Usage
A complete example using the installed component and hook paths.
Input OTP usage
"use client";type PreviewProps = { interactive?: boolean };import { useId, useState } from "react";import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";import { Label } from "@/components/ui/label";function InputOTPPreview({ interactive }: PreviewProps) { const id = useId(); const [value, setValue] = useState(""); return ( <div className="space-y-2"> <Label htmlFor={id}>Example code</Label> <InputOTP maxLength={4} id={id} pattern="^[0-9]+$" value={value} onChange={setValue} aria-label="Example code" > <InputOTPGroup> {[0, 1, 2, 3].map((index) => ( <InputOTPSlot key={index} index={index} /> ))} </InputOTPGroup> </InputOTP> {interactive && ( <output className="block text-xs text-muted-foreground"> {value.length === 4 ? "Code entered (not verified)" : "Enter four digits"} </output> )} </div> );}export default function Demo() { return <InputOTPPreview interactive />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
InputOTP
InputOTP props
React.ComponentProps<typeof OTPInput> & { containerClassName?: string;} & { sound?: boolean }- sound
- true
InputOTPGroup
InputOTPGroup props
React.ComponentProps<"div">InputOTPSlot
InputOTPSlot props
React.ComponentProps<"div"> & { index: number;}InputOTPSeparator
InputOTPSeparator props
React.ComponentProps<"div">