Input OTP

Ready

One-Time Password input for verification codes, PIN codes, and security authentication.

Basic Usage

6-digit verification code input with automatic focus management and paste support.

Verification Code

With Separator

Visual separator between digit groups for better readability (e.g., 123-456).

Enter Code

PIN Code

4-digit PIN input with password masking for security.

PIN Code

Text Type

Accept alphanumeric characters for codes that include letters.

Alphanumeric Code

Error State

Show error state with custom error message when validation fails.

Verification Code

Try entering "123456" for success, or any other code to see error state.

Features

Built-in functionality

Auto-focus next input field on character entry
Backspace navigation to previous field
Arrow key navigation (left/right)
Paste support - automatically fills all fields
Optional separator between digit groups
Three input types: number, text, password
Completion callback when all fields filled
Error state with custom error messages
Configurable length (4, 6, 8 digits, etc.)

Usage

Basic implementation example

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

function MyComponent() {
  const [code, setCode] = useState('')

  return (
    <InputOTP
      label="Verification Code"
      length={6}
      value={code}
      onChange={setCode}
      separator
      separatorAfter={3}
      onComplete={(value) => {
        console.log('Code entered:', value)
        // Verify the code
      }}
    />
  )
}

API Reference

InputOTP component props

Prop	Type	Default	Description
length	number	6	Number of input fields
value	string	''	Controlled value
onChange	(value: string) => void	-	Callback when value changes
onComplete	(value: string) => void	-	Callback when all fields filled
type	'number' \| 'text' \| 'password'	'number'	Input type and keyboard mode
separator	boolean	false	Show separator between groups
separatorAfter	number	3	Position of separator
label	string	-	Label text above inputs
error	boolean \| string	false	Error state and message
disabled	boolean	false	Disable all inputs