Como desenhar um campo de texto que cresce com a resposta

Para fazer um campo de texto crescer conforme a pessoa escreve, aplique field-sizing: content a um textarea com largura previsível e limites de altura. O campo ganha linhas quando o conteúdo quebra, até atingir o limite definido. A partir daí, a rolagem interna mantém o restante do formulário ao alcance. A altura inicial ainda precisa sugerir a extensão da resposta esperada, inclusive com o campo vazio.

Esse comportamento ajuda principalmente quando o mesmo campo aceita respostas muito diferentes. Uma pessoa pode enviar “A lâmpada do corredor queimou”. Outra pode explicar em dois parágrafos como reproduzir um defeito. O espaço cresce durante a escrita e dá às duas pessoas uma superfície de revisão compatível com a tarefa.

Como evitar que o campo sugira uma regra inexistente?

Altura e quantidade de caracteres comunicam coisas diferentes. Uma resposta curta em palavras pode ocupar muitas linhas numa tela estreita. Uma resposta extensa pode caber em poucas linhas num monitor largo. Por isso, use a altura para controlar espaço de edição e apresente separadamente qualquer limite efetivo de texto. Se o limite for importante para concluir a tarefa, deixe a informação visível antes da digitação e explique como corrigir um excesso. Teste essa instrução quando a pessoa cola uma resposta longa. A rolagem interna deve permitir recuperar e editar o trecho final, enquanto o feedback permanece visível junto do campo. A pessoa pode então decidir o que encurtar sem perder a noção do que já escreveu.

Na mesma revisão, tente uma resposta com parágrafos separados por linhas vazias. Ela cresce mais depressa que uma resposta com o mesmo número de caracteres em bloco único. Essa diferença indica quanto espaço a interface precisa reservar para quem organiza a escrita visualmente.

O que a altura inicial comunica?

Em um formulário para solicitar ajuda com um produto, compare duas versões vazias. Na primeira, a descrição tem a altura de um campo de nome. Na segunda, há espaço visível para algumas linhas. A primeira comunica uma nota breve. A segunda convida a descrever o problema. Essa mensagem visual atua junto do rótulo e da instrução. Se a equipe espera contexto, dois ou três passos e um resultado observado, uma caixa que parece aceitar apenas uma frase cria uma expectativa conflitante.

Use um rótulo persistente e uma instrução perto do controle. Um exemplo pode ajudar quando há um formato pouco conhecido. Coloque instruções essenciais fora do placeholder, que some durante a edição. A orientação de UX writing para campos, erros e confirmações ajuda a decidir qual informação deve acompanhar o campo durante a revisão. Faça o teste com a caixa vazia, preenchida e com uma mensagem de erro abaixo. O propósito precisa continuar claro nos três estados.

Quando a expansão melhora o formulário?

O melhor candidato é uma caixa que pede texto livre e está em uma página com espaço para reorganizar os elementos abaixo. Num formulário de contato, ela pode partir de uma altura curta e crescer até um teto moderado. Um editor que exige muitos parágrafos pode merecer uma área ampla desde o primeiro momento, com espaço suficiente para comparar trechos. Em um painel estreito com muitos campos interdependentes, o crescimento pode deslocar controles que a pessoa precisa consultar enquanto escreve.

Observe a mudança em relação às outras ações. Quando a resposta ocupa mais espaço, a posição do botão de envio naturalmente muda. Essa mudança é aceitável se a pessoa ainda consegue encontrar o botão ao terminar. Se a ação fica escondida atrás do teclado do celular ou se uma barra fixa cobre a última linha, ajuste a composição antes de aumentar a altura máxima. Em formulários com erros, preserve um caminho claro para voltar ao ponto da correção. Veja o caso de resumo de erros com caminho de correção.

Como configurar largura e altura em CSS?

Comece com um textarea nativo, associado a um label, e mantenha um valor de rows como referência para a versão básica. Use inline-size: 100% se o campo deve acompanhar a coluna e box-sizing: border-box para que borda e preenchimento caibam nessa largura. Dentro de @supports (field-sizing: content), aplique a propriedade e defina min-block-size e max-block-size. Esses limites controlam a expansão vertical em uma página com escrita horizontal.

Uma altura de bloco fixa pode impedir o comportamento pretendido. Procure valores herdados de regras do sistema de componentes, especialmente quando o campo usa as mesmas classes de controles de uma linha. Mantenha rolagem utilizável ao alcançar o teto. Experimente, por exemplo, um mínimo de cerca de três linhas e um teto de cerca de oito na tipografia do formulário. Trate esses números como ponto de partida para o protótipo. O MDN explica como o conteúdo determina as dimensões, e o guia do Chrome mostra como combinar crescimento e limites.

Como evitar surpresas no celular?

Teste em uma coluna estreita com o teclado aberto. Cole três parágrafos e tente tocar na última frase para corrigi-la. Em seguida, deslize pelo conteúdo do campo e pela página. A pessoa precisa conseguir distinguir qual superfície está rolando. Um teto adequado em desktop pode ocupar quase toda a área disponível em um telefone na horizontal. Reduza o limite em layouts com pouca altura disponível se isso mantiver o campo e as ações vizinhas acessíveis.

Também experimente ampliar o tamanho do texto. A resposta vai quebrar em mais linhas e chegar ao limite mais cedo. Confira se a borda do controle, a mensagem de ajuda e o contorno de foco continuam visíveis. Preserve a seleção de texto e a edição nativa. Um campo que substitui o controle por uma caixa visualmente parecida perde comportamentos de formulário que a pessoa espera, como navegar até o campo pelo rótulo e editar com as ferramentas do sistema.

Quais casos entram na prova do componente?

Confira o estado vazio, uma frase curta, uma palavra longa, uma URL, três parágrafos colados e uma resposta restaurada quando a pessoa volta à página. Insira uma quebra de linha no meio do texto e remova-a. Apague todo o conteúdo e observe se a caixa retorna ao mínimo. No teto, navegue entre a primeira e a última linha com teclado. Se houver um contador de caracteres, mantenha-o legível fora da área que rola e confira se ele tem relação clara com o campo.

Repita a tarefa com a propriedade desativada. Uma caixa estável de altura suficiente é uma versão básica funcional. O ajuste nativo pode entrar como melhoria progressiva quando a área fixa já permite escrever e revisar. Se o formulário oferece redimensionamento manual, teste também a interação entre o tamanho escolhido pela pessoa e o crescimento automático no navegador real. Documente o comportamento que a equipe pretende oferecer e onde ele foi conferido.

Como especificar a decisão no design?

Na ficha do componente, desenhe quatro estados com conteúdo real. Mostre a altura mínima vazia, um estado intermediário, o momento em que começa a rolagem interna e uma resposta reapresentada após uma tentativa de envio. Anote o que permanece fixo, como a largura da coluna e a posição da instrução relativa ao rótulo. Registre também se o crescimento acontece em todos os usos ou só em formulários com texto livre.

Num protótipo, acompanhe alguém do início da escrita até a correção de uma frase anterior. Esse percurso revela se a altura adicional virou espaço de leitura ou só empurrou controles. Defina o limite olhando a página inteira e revise o tamanho inicial a partir da resposta que o rótulo convida a escrever. Assim, a expansão passa a apoiar a tarefa em vez de impor a mesma caixa a qualquer formulário.