Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

OTP field

Campo para um código de uso único, dividido em uma casa por caractere. Digitar avança, Backspace volta, e colar ou o preenchimento automático do SMS completa todas as casas de uma vez.

Feito com Base UIPadrão HTML input (autocomplete=one-time-code)Componente clienteCódigo ↗
minimal · light · #3fa34d

Enviado por SMS para (11) •••••-4321.

mask
disabled

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Coloque dentro de um Field para dar um rótulo.

import { OtpField, Field, FieldLabel } from "@camaleo/react";

Anatomia

Uma fileira de casas, cada uma um input. O separator põe um traço entre os grupos, só para os olhos.

482–913
[data-slot="otp-field"][data-slot="otp-separator"][data-slot="otp-input"]

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

Enviado por SMS para (11) •••••-4321.

Cole 482913 ou digite qualquer outro código.

Colar, verificar e erro

Cole um código. O onValueComplete roda quando a última casa é preenchida, então você confere na hora; um código errado marca todas as casas como inválidas.

Este código venceu depois de 10 minutos. Peça um novo.

Código vencido

Quando o servidor recusa o código, use invalid no Field e diga o que fazer em seguida, não só que falhou.

Nada enviado ainda. Preencha a última casa.

Enviar ao completar

Digite seis dígitos. O autoSubmit envia o formulário no último, e o name manda o código inteiro por um input oculto.

Os 4 dígitos que você usa no caixa eletrônico.

Senha mascarada

O mask esconde cada dígito depois de digitado. Use para uma senha que alguém poderia ver por cima do ombro, não para um código que vence em minutos.

Letras e números, dos códigos que você guardou ao ativar a verificação em duas etapas.

Letras e números

O validationType="alphanumeric" aceita letras e abre o teclado completo; o normalizeValue passa tudo para maiúsculas, então "k7p" confere.

Nomes das casas traduzidos

A primeira casa usa o rótulo do Field e as outras recebem o getCellLabel, então passe um no idioma da página.

Enviando um novo código para (11) •••••-4321…

Desativado durante o envio

Desative enquanto um código novo está a caminho e diga isso na descrição, para ninguém digitar o antigo.

Em contexto

São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Verificação em duas etapas

Digite o código de 6 dígitos do seu app autenticador.

Usar um código de recuperação
Verificação em duas etapasCard · Field · OtpField · Link · Button

Confirme seu celular

Enviamos um código por SMS para (11) 98765-4321.

Confirmar o celularCard · Field · OtpField · Button

Confirme o Pix

R$ 1.250,00 para Marina Alves, Banco Pão de Açúcar.

Abra o app do banco e toque em Código de segurança.

Confirmar um PixCard · Field · OtpField · Button

Boas práticas

Enviado por SMS para (11) •••••-4321.

FaçaDiga para onde o código foi.

A pessoa sabe qual app abrir e percebe um número errado.

EviteSó "Código".

Do e-mail, do SMS ou do autenticador? A pessoa troca de app para adivinhar.

FaçaMostre os dígitos enquanto a pessoa digita.

Ela compara com o SMS num relance.

EviteMascarar um código de uso único.

Ele vence em minutos e só vale uma vez; esconder só dificulta achar o erro de digitação.

Props

PropriedadeTipoPadrãoDescrição
separatornumber—Desenha um separador a cada separator casas (3 → 123–456).
getCellLabel(index: number, length: number) => string(index, length) => `Character ${index + 1} of ${length}`Nome acessível das casas a partir da segunda (traduzível). A primeira usa o rótulo do campo, então dê nome ao campo inteiro com Field + FieldLabel.
autoCompletestring'one-time-code'O atributo autocomplete da primeira casa. Mantenha one-time-code para códigos por SMS e e-mail.
length*number—Quantidade de casas.
autoSubmitbooleanfalseEnvia o formulário quando o código fica completo.
maskbooleanfalseEsconde os caracteres digitados, como num campo de senha.
validationType"numeric" | "alpha" | "alphanumeric" | "none"'numeric'Quais caracteres são aceitos. Também escolhe o teclado do celular.
normalizeValue(value: string) => string—Transforma o valor depois do filtro, por exemplo para maiúsculas. Deve dar o mesmo resultado se rodar duas vezes.
requiredbooleanfalseExige um valor antes de enviar o formulário.
disabledbooleanfalseDesativa todas as casas.
namestring—Identifica o código no envio do formulário.
valuestring—O código, controlado.
defaultValuestring—O código inicial, não controlado.
onValueChange(value: string, details) => void—Roda a cada mudança, ao digitar, colar ou pelo teclado. details.reason diz qual.
onValueComplete(value: string, details) => void—Roda quando todas as casas estão preenchidas, depois do onValueChange. Confira o código aqui.

As outras props da raiz do Base UI também funcionam, como readOnly, inputMode, form e onValueInvalid.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio campo.

Atributos

data-slot"otp-field" · "otp-input" · "otp-separator"
data-fillednuma casa com caractere; na raiz quando alguma casa tem um
data-completepresente quando todas as casas estão preenchidas
data-invalidpresente quando o Field é inválido
data-disabledpresente quando desativado
data-focusedpresente enquanto alguma casa tem foco

Tokens que ele lê

Cor

--cml-border-control--cml-danger--cml-fg--cml-fg-muted--cml-field-bg--cml-field-border-sides--cml-field-shadow--cml-focus-ring

Forma e tamanho

--cml-field-border-width--cml-field-height--cml-field-padding--cml-font-size-field--cml-radius-control--cml-radius-field

Tipografia e movimento

--cml-duration-fast--cml-ease-standard--cml-font-field

Só deste componente

--cml-corner-shape--cml-disabled-opacity--cml-otp-cell-height--cml-otp-cell-width--cml-otp-font--cml-otp-font-size--cml-otp-font-weight--cml-otp-gap--cml-otp-separator
/* casas menores, só na tela de pagamento */
.payment-sheet [data-slot="otp-field"] {
  --cml-otp-cell-width: 2.25rem;
  --cml-otp-cell-height: 2.5rem;
  --cml-otp-gap: 0.375rem;
}

Acessibilidade

0–9 · letrasPreenche a casa e passa para a próxima. Caracteres que o validationType recusa são ignorados.
BackspaceApaga a casa e volta para a anterior.
Arrow Left · Arrow RightAnda entre as casas sem mudar nada.
Ctrl + V · Cmd + VCola o código inteiro e preenche todas as casas a partir da primeira.
TabLeva o foco para o campo e depois para o próximo controle.

Relacionados

FieldRótulo, descrição e erro de um controle.Input groupInputs com complementos, senha e busca.Error summaryLista os erros do formulário depois do envio.
Esta página foi útil? · Editar esta página no GitHub