OTP Input
Um conjunto de campos de entrada para autenticação em duas etapas, com suporte a colagem, navegação por teclado e personalização de tamanho.
Caso não tenha recebido, reenviar código.
Utilização
index.tsx
import { OtpInput } from "@convertcompany/ui";
Exemplos
Tamanhos disponíveis
sm
md
lg
xl
Em um fluxo de autenticação (2FA)
Você pode usar o componente Dialog para criar um fluxo de autenticação em duas etapas. O exemplo abaixo mostra como integrar o OtpInput dentro de um Dialog, permitindo que o usuário insira o código recebido por SMS ou email.
Props
| Propriedade | Tipo |
|---|---|
| lengthNúmero de dígitos. Padrão é 6. | number |
| onChangeCodeExecutado a cada mudança no valor. | (code: string) => void |
| onFinishExecutado automaticamente ao preencher todos os campos. | (code: string) => void |
| sizeTamanho visual dos campos. | sm md lg xl |
| variantEstilo visual do campo. | default unstyled |
| classNameClasse CSS adicional. | string |
| ...propsDemais props do container. | HTMLAttributes<HTMLDivElement> |