Ravox KitFormulário
Campo
Campo de texto com rótulo, dica e erro já ligados ao input, ícone ou prefixo no começo e uma ação no fim (gerar, copiar, mostrar senha). Aceita o register() do React Hook Form direto.
Letras, números e ponto. Dá para trocar depois.
Ajustes
Estado
Tamanho
No fim
Instalação
O shadcn cria components/ui/campo.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/campo.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| rotulo | ReactNode | — | Texto do <label>. Sem rótulo, passe aria-label. |
| dica | ReactNode | — | Ajuda embaixo do campo, lida junto com ele (aria-describedby). Some quando há erro. |
| erro | ReactNode | — | Mensagem de erro: pinta a borda, marca aria-invalid e é lida junto com o campo. |
| icone | ReactNode | — | Ícone ou prefixo no começo, dentro da borda (<Search />, "R$", "https://"). |
| acao | ReactNode | — | Ação no fim, dentro da borda. Use <CampoAcao>. |
| revelar | boolean | false | Com type="password": botão de mostrar e esconder a senha. |
| tamanho | "pequeno" | "medio" | "grande" | "medio" | Altura: 32, 40 ou 48px. O médio usa 16px no celular (sem zoom do iPhone). |
| classeBloco | string | — | Classes do bloco de fora; className vai no <input>. |
| ...props | ComponentProps<"input"> | — | Tudo o que um <input> aceita, inclusive ref (React 19): {...register("email")} funciona. |