Vox Mente
Navegação

Componentes

Input OTP

beta

Código de confirmação em casas separadas. Usado na aceitação de convite, onde o usuário digita o que recebeu por outro canal.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/input-otp

Playground
<InputOTP aria-label="Código de confirmação" maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
InputOTP
  └─ InputOTPGroup
    └─ InputOTPSlot
  └─ InputOTPSeparator
  └─ InputOTPGroup
    └─ InputOTPSlot

Uso

Um caractere por slot. Use para confirmar o código de um convite, nunca para senha — não há máscara. O componente controla o próprio valor: passar defaultValue conflita com o value interno, então não há como pré-preencher a demonstração.

Com separador

`InputOTPSeparator` quebra o código em blocos visuais. Ajuda a ler em voz alta — combina com convite passado por telefone.

Quatro dígitos

`maxLength` define o tamanho do código — combine com o número de slots renderizados. Códigos curtos cabem em convite de aluno, lido em voz alta pelo professor.

Desabilitado

O grupo inteiro esmaece. Use enquanto o convite ainda está sendo gerado ou já expirou.

Padrão de caracteres

`pattern` restringe o que cada slot aceita. `^\d+$` barra letra — combina com convite numérico, que é o padrão desta lista. Sem `pattern`, qualquer caractere entra.

Variante alfanumérica

`pattern="^[a-zA-Z0-9]+$"` libera letra e número no mesmo código — é a mesma expressão que a biblioteca `input-otp` exporta como `REGEXP_ONLY_DIGITS_AND_CHARS`. Convite de coordenação costuma misturar os dois para não parecer um número de protocolo.

Modo controlado

Passe `value` e `onChange` para ler o código enquanto ele é digitado — necessário para validar contra o convite antes do aluno confirmar, em vez de esperar o `onComplete`.

Código digitado: —

Estado inválido

`aria-invalid` no `InputOTPGroup` acende a borda e o anel de destrutivo em todo o bloco. Use depois que o convite for rejeitado — código expirado ou digitado errado.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

InputOTPSlot

PropTipoPadrão
index*number—

Também aceita as props de React, incluindo className e os atributos de DOM.

InputOTP, InputOTPGroup, InputOTPSeparator não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css