Como ele é
É um cartão branco com um ícone, um título e seis quadradinhos lado a lado, separados por um tracinho no meio. O quadrado ativo ganha borda colorida e um cursor piscando; cada número entra subindo de leve e o destaque passa sozinho para o próximo. Enquanto o código é conferido, as células brilham em sequência; se der certo, ficam verdes uma a uma, e se der errado, ficam vermelhas e a fileira treme de um lado para o outro. Embaixo, o botão de reenviar mostra a contagem regressiva.
Você pode estar procurando isto se pediu algo assim
- campo para digitar o código que chega por SMS
- quadradinhos de código de verificação igual app de banco
- tela de confirmar celular com código de 6 dígitos
- colar o código do SMS de uma vez só no campo
- botão de reenviar código com contagem regressiva
- campo de PIN com bolinhas no lugar dos números
- login sem senha com código enviado por e-mail
Também chamado de
- OTP input
- código de verificação
- one-time code
- PIN input
- campo de código SMS
- verification code input
- código 2FA
Quando usar
- Confirmação de celular ou de e-mail no cadastro
- Login sem senha e autenticação em dois fatores
- PIN para assinar receitas, contratos ou aprovar pagamentos
- Telas de segurança de apps de banco, saúde ou fintech
Quando evitar
- Códigos com letras, já que o campo aceita só dígitos
- Fluxos em que um link de acesso por e-mail dispensa o código
Como pedir para a sua IA
Crie a tela de confirmação de celular com um campo OTP de 6 dígitos em células: um único input com autocomplete one-time-code, colar o código do SMS, avanço automático, estados de erro e sucesso, reenviar com contagem e suporte a leitor de tela.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre OTP Input
O OTP Input preenche o código do SMS sozinho?
Em boa parte dos celulares, sim. O OTP Input usa um campo real com autocomplete one-time-code, que deixa o sistema sugerir o código recebido por SMS, e aceita colar uma frase inteira, aproveitando só os dígitos do código. No Chrome para Android, a prop webOtp ainda lê o SMS pela WebOTP API.
Como ligo o OTP Input à minha API de verificação?
Passe uma função assíncrona na prop verify: o OTP Input a chama quando o código fica completo, mostra o estado verificando e trata a resposta, em que true confirma e um texto vira a mensagem de erro. Os eventos complete, verified, rejected e resend avisam o seu código, e o v-model traz só os dígitos.
O OTP Input é acessível?
É. O OTP Input expõe um único campo com rótulo e descrição, que o leitor de tela lê como um campo comum, anuncia verificação, erro e reenvio numa região própria e aceita setas, Home, End e Enter. Com a preferência de menos movimento ativa, o tremor e as animações dos dígitos são desligados.
