OTPInput

Entrada de contraseña de un solo uso con auto-enfoque y soporte para pegar.

Importar

import { OTPInput } from 'asterui'

Ejemplos

OTP Input básico

Entrada OTP simple de 6 dígitos.

</>

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

Cuatro dígitos

Entrada OTP de longitud personalizada.

</>

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

Tamaños

Diferentes variantes de tamaño.

</>

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

Entrada enmascarada

Oculta los valores ingresados con puntos.

</>

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

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

export default App

Alfanumérico

Acepta tanto letras como números.

</>

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

Estado de error

Muestra estilo de error para entrada inválida.

</>

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

Estado deshabilitado

Entrada deshabilitada no interactiva.

</>

import { OTPInput } from 'asterui'

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

export default App

API

OTPInput

Propiedad	Descripción	Tipo	Predeterminado
length	Número de campos de entrada	number	6
value	Valor actual	string	-
onChange	Callback cuando el valor cambia	(value: string) => void	-
onComplete	Callback cuando todos los campos están llenos	(value: string) => void	-
size	Tamaño de entrada	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
type	Tipo de entrada - solo números o alfanumérico	'number' | 'text'	'number'
mask	Enmascarar entrada (mostrar puntos en lugar de caracteres)	boolean	false
disabled	Estado deshabilitado	boolean	false
error	Estado de error	boolean	false
autoFocus	Auto-enfocar primera entrada al montar	boolean	false
placeholder	Carácter de marcador de posición	string	-
className	Clases CSS adicionales	string	-

Métodos de ref

Propiedad	Descripción	Tipo	Predeterminado
focus	Enfocar la primera entrada	() => void	-
clear	Limpiar todas las entradas y enfocar la primera	() => void	-

Accesibilidad

• Cada entrada tiene un aria-label indicando su posición
• Soporta navegación por teclado con teclas de flecha
• Retroceso mueve el foco a la entrada anterior
• Soporta pegar códigos OTP completos