Ravox KitFormulário
Código de verificação
Casas para o código de SMS ou e-mail, feitas sobre um único input: colar o código inteiro preenche tudo, o celular sugere o código recebido e o leitor de tela ouve um campo só. Números ou letras, separador, oculto e estado de erro; aceita o register() do React Hook Form.
Mandamos por e-mail. Vale por 10 minutos.
Ajustes
Aceita
Tamanho
Exemplos
Envia sozinho ao completar
Teste com 482913.
Alfanumérico com React Hook Form
PIN oculto em formulário comum
Instalação
O shadcn cria components/ui/codigo-verificacao.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/codigo-verificacao.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| casas | number | 6 | Quantas casas. Ignorado quando há grupos. |
| grupos | number[] | — | Divide as casas com um separador: [3, 3] vira 000–000. |
| tipo | "numeros" | "alfanumerico" | "numeros" | numeros abre o teclado numérico; alfanumerico aceita letras e passa para maiúscula. O resto é descartado (colar "482-913" funciona). |
| valor / padrao | string | — | Código atual (controlado) ou no começo. |
| aoTrocar | (codigo: string) => void | — | A cada tecla, já limpo. |
| aoCompletar | (codigo: string) => void | — | Quando a última casa é preenchida: bom para enviar sozinho. |
| ocultar | boolean | false | Bolinhas no lugar dos caracteres (PIN). |
| rotulo / dica / erro | ReactNode | — | Como no Campo: ligados ao input; erro pinta as casas e marca aria-invalid. |
| tamanho | "medio" | "grande" | "medio" | Tamanho das casas. |
| classeBloco | string | — | Classes do bloco de fora; className vai na fileira de casas. |
| ...props | ComponentProps<"input"> | — | name, required, ref, onChange, onBlur vão para o input de verdade: {...register("codigo")} funciona. |