OTP Input

Apresentação

O componente OTPInput é responsável por criar campos de entrada para códigos OTP (One-Time Password) e outros códigos de verificação. Ele oferece uma experiência de usuário otimizada com navegação automática entre campos, validação de entrada e suporte a diferentes tipos de caracteres.

Quando usar

• Para códigos de verificação por SMS
• Para códigos de autenticação de dois fatores
• Para códigos de ativação de conta
• Para códigos de recuperação de senha
• Para códigos de confirmação de pagamento
• Para códigos de acesso temporário
• Para códigos de validação de email
• Para códigos de segurança

Forma básica de uso

import { OTPInput } from 'eitri-luminus';

// OTP básico com 4 dígitos
<OTPInput 
  maxLength={4}
  onChange={(e) => console.log('Código:', e.target.value)}
/>

// OTP com 6 dígitos e auto-submit
<OTPInput 
  maxLength={6}
  autoSubmit={true}
  onSubmit={(e) => console.log('Código completo:', e.target.value)}
/>

// OTP alfanumérico
<OTPInput 
  maxLength={5}
  accept="alphanumeric"
  placeholder="Digite o código"
/>

// OTP com foco automático
<OTPInput 
  maxLength={4}
  autoFocus={true}
  className="otp-custom"
/>

// OTP com navegação para próximo campo
<OTPInput 
  maxLength={4}
  nextInputOnSubmit="proximo-campo"
  autoSubmit={true}
/>

// OTP apenas números
<OTPInput 
  maxLength={6}
  accept="numbers"
  onChange={(e) => setCodigo(e.target.value)}
/>

// OTP apenas letras
<OTPInput 
  maxLength={4}
  accept="letters"
  placeholder="Digite as letras"
/>

// OTP com validação personalizada
<OTPInput 
  maxLength={4}
  onChange={(e) => {
    if (e.target.value.length === 4) {
      validarCodigo(e.target.value);
    }
  }}
/>

// OTP para verificação de email
<OTPInput 
  maxLength={6}
  autoSubmit={true}
  onSubmit={(e) => verificarEmail(e.target.value)}
  placeholder="Código do email"
/>

// OTP para autenticação 2FA
<OTPInput 
  maxLength={6}
  accept="numbers"
  autoSubmit={true}
  onSubmit={(e) => autenticar2FA(e.target.value)}
/>

Propriedades

Propriedade	Tipo	Descrição
maxLength	number	Número máximo de caracteres (padrão: 4)
accept	string	Tipo de entrada: 'numbers', 'letters', 'alphanumeric'
autoSubmit	boolean	Submete automaticamente quando completo
onSubmit	function	Função chamada quando autoSubmit é true
nextInputOnSubmit	string	ID do próximo campo para focar após submit
autoFocus	boolean	Foca automaticamente no primeiro campo
onChange	function	Função chamada quando o valor muda
placeholder	string	Texto de placeholder
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente OTPInput herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente cria automaticamente múltiplos campos de entrada
• Navega automaticamente para o próximo campo ao digitar
• Suporta navegação com setas do teclado
• Permite colar códigos completos
• Valida entrada baseada no tipo aceito
• Suporta backspace para voltar ao campo anterior
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tamanhos de código
• Pode ser combinado com outros componentes
• Ideal para autenticação e verificação
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de códigos
• Funciona bem com formulários de verificação
• Facilita a entrada de códigos OTP
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de códigos
• Funciona bem com formulários de verificação
• Facilita a entrada de códigos OTP