OTPInput

One-time password input with auto-focus and paste support.

Import

import { OTPInput } from 'asterui'

Examples

Basic OTP Input

Simple 6-digit OTP input.

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <OTPInput
        value={value}
        onChange={setValue}
        onComplete={(otp) => console.log('Complete:', otp)}
      />
    )
}

export default App

Four Digit

Custom length OTP input.

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <OTPInput
        length={4}
        value={value}
        onChange={setValue}
      />
    )
}

export default App

Sizes

Different size variants.

</>

import { OTPInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="lg">
        <OTPInput length={4} size="xs" />
        <OTPInput length={4} size="sm" />
        <OTPInput length={4} size="md" />
        <OTPInput length={4} size="lg" />
      </Space>
    )
}

export default App

Masked Input

Hide entered values with dots.

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <OTPInput
        value={value}
        onChange={setValue}
        mask
      />
    )
}

export default App

Alphanumeric

Accept both letters and numbers.

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <OTPInput
        value={value}
        onChange={setValue}
        type="text"
        length={5}
      />
    )
}

export default App

Error State

Show error styling for invalid input.

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('123')
  
  return (
      <OTPInput
        value={value}
        onChange={setValue}
        error
        length={4}
      />
    )
}

export default App

Disabled State

Non-interactive disabled input.

</>

import { OTPInput } from 'asterui'

function App() {
  return (
      <OTPInput
        value="123456"
        disabled
      />
    )
}

export default App

API

OTPInput

Property	Description	Type	Default
length	Number of input fields	number	6
value	Current value	string	-
onChange	Callback when value changes	(value: string) => void	-
onComplete	Callback when all fields are filled	(value: string) => void	-
size	Input size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
type	Input type - number only or alphanumeric	'number' | 'text'	'number'
mask	Mask input (show dots instead of characters)	boolean	false
disabled	Disabled state	boolean	false
error	Error state	boolean	false
autoFocus	Auto focus first input on mount	boolean	false
placeholder	Placeholder character	string	-
data-testid	Test ID prefix for child elements	string	-
className	Additional CSS classes	string	-

Ref Methods

Property	Description	Type	Default
focus	Focus the first input	() => void	-
clear	Clear all inputs and focus first	() => void	-

Accessibility

• Each input has an aria-label indicating its position
• Supports keyboard navigation with arrow keys
• Backspace moves focus to previous input
• Supports pasting full OTP codes