Input OTP

A one-time password input with separate slots.

Installation

bash
npx shadcn@latest add input-otpnpm install input-otp

Import

import {  InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator,} from "@/components/ui/input-otp"import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"

Basic

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

Pattern Validation

<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>  ...</InputOTP>

Controlled

const [value, setValue] = React.useState("")<InputOTP maxLength={6} value={value} onChange={setValue}>  ...</InputOTP>

Props

PROPTYPEDEFAULTDESCRIPTION
maxLengthnumber—Number of OTP slots (required)
valuestring—Controlled value
onChange(value: string) => void—Called when value changes
patternRegExp—Regex pattern for allowed characters