Ravox KitFormulário
Área de texto
Texto longo no mesmo desenho do Campo: rótulo, dica e erro ligados, contador de caracteres que avisa perto do limite e altura que cresce com o texto até um teto. Aceita o register() do React Hook Form direto.
Aparece na página do design e na busca.
Ajustes
Estado
Exemplos
Com React Hook Form
Resposta curta que cresce
Tamanho fixo, o usuário arrasta
Perto do limite
Restam 7 caracteres.
Instalação
O shadcn cria components/ui/area-texto.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/area-texto.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, lida junto com o campo. Some quando há erro. |
| erro | ReactNode | — | Mensagem de erro: pinta a borda, marca aria-invalid e é lida junto com o campo. |
| contador | boolean | false | Mostra "120/500" no canto, contando contra o maxLength. Perto do fim muda de cor e o leitor de tela ouve quantos faltam. |
| crescer | boolean | true | A altura acompanha o texto (field-sizing, com medida em JS onde não há). Desligado, o usuário arrasta o canto. |
| minLinhas | number | 3 | Altura mínima, em linhas. |
| maxLinhas | number | 10 | Até onde cresce; depois rola. |
| classeBloco | string | — | Classes do bloco de fora; className vai no <textarea>. |
| ...props | ComponentProps<"textarea"> | — | Tudo o que um <textarea> aceita, inclusive maxLength e ref: {...register("descricao")} funciona. |