OTPInput

Entrada de senha única com foco automático e suporte a colar.

Importação

import { OTPInput } from 'asterui'

Exemplos

OTP Input Básico

Entrada OTP simples 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

Quatro Dígitos

Entrada OTP com comprimento customizado.

</>

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

Tamanhos

Diferentes variantes de tamanho.

</>

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 Mascarada

Oculta valores inseridos com pontos.

</>

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

Aceita letras e 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 Erro

Mostra estilo de erro 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 Desabilitado

Entrada desabilitada não interativa.

</>

import { OTPInput } from 'asterui'

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

export default App

API

OTPInput

Propriedade	Descrição	Tipo	Padrão
length	Número de campos de entrada	number	6
value	Valor atual	string	-
onChange	Callback quando o valor muda	(value: string) => void	-
onComplete	Callback quando todos os campos estão preenchidos	(value: string) => void	-
size	Tamanho da entrada	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
type	Tipo de entrada - somente número ou alfanumérico	'number' | 'text'	'number'
mask	Mascarar entrada (mostrar pontos em vez de caracteres)	boolean	false
disabled	Estado desabilitado	boolean	false
error	Estado de erro	boolean	false
autoFocus	Focar automaticamente na primeira entrada ao montar	boolean	false
placeholder	Caractere placeholder	string	-
className	Classes CSS adicionais	string	-

Métodos Ref

Propriedade	Descrição	Tipo	Padrão
focus	Focar a primeira entrada	() => void	-
clear	Limpar todas as entradas e focar a primeira	() => void	-

Acessibilidade

• Cada entrada tem um aria-label indicando sua posição
• Suporta navegação por teclado com teclas de seta
• Backspace move o foco para a entrada anterior
• Suporta colar códigos OTP completos