New

InputOTP

Accessible one-time password input for authentication.

inputs

form

otp

verification

auth

Preview

Variants

Default OTP input layout.

Code

TSX

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

    export function InputOTPDemo() {
      return (
        <InputOTP maxLength={6}>
          <InputOTPGroup>
            <InputOTPSlot index={0} />
            <InputOTPSlot index={1} />
            <InputOTPSlot index={2} />
            <InputOTPSlot index={3} />
            <InputOTPSlot index={4} />
            <InputOTPSlot index={5} />
          </InputOTPGroup>
        </InputOTP>
      )
    }

API Reference

Prop	Type	Default	Description
maxLength	number	-	Maximum number of characters or digits.
value	string	-	The controlled value of the OTP input.
onChange	function	-	Event handler called when the input's value changes.
pattern	RegExp	-	Regular expression pattern for digit filtering.
disabled	boolean	-	Whether the input is disabled.

View Full Documentation