Textarea

Campo de texto com várias linhas, com o mesmo visual e os mesmos estados do Input: borda, foco, erro e desabilitado. Por padrão, cresce conforme o conteúdo.

Usa as mesmas peças de composição do Input: InputWrapper, InputField, InputLabel e InputText.

Exemplos

Padrão (label estático)

Label flutuante

Texto de ajuda, desabilitado e inválido

Tamanho médio (md)

Altura automática com limite

Por padrão, o campo começa com a altura de rows (3 linhas) e cresce conforme o texto. Com maxRows, para de crescer no limite e passa a rolar por dentro.

Altura fixa

Com autoResize={false}, a altura fica fixa em rows e a pessoa pode redimensionar o campo na vertical.

Contador de caracteres

Com showCount, mostra quantos caracteres foram digitados abaixo do campo. Com maxLength, mostra também o limite (ex.: 12/200).

API

Textarea

Elemento de textarea. Aceita os atributos HTML padrão de um textarea (ex.: name, value, defaultValue, onChange). As peças InputWrapper, InputField, InputLabel e InputText estão documentadas na página do Input.

Propriedade	Tipo	Padrão	Descrição
size	"md" | "lg"	"lg"	Tamanho do texto e da label, iguais aos do Input. "lg" usa texto de 16px e "md", de 14px.
invalid	boolean	false	Quando true, define aria-invalid e usa as cores de erro na borda e no contador. A label fica com a cor de erro só enquanto o campo está em foco.
rows	number	3	Altura inicial, em linhas. Com a altura automática, é também a altura mínima.
maxRows	number	-	Limite de crescimento, em linhas. Depois dele, o campo rola por dentro. Sem ele, o campo cresce sem limite. Só vale com autoResize.
autoResize	boolean	true	Quando true, a altura acompanha o conteúdo. Quando false, a altura fica fixa em rows e a pessoa pode redimensionar o campo na vertical.
showCount	boolean	false	Mostra o contador de caracteres abaixo do campo, ligado ao textarea por aria-describedby.
maxLength	number	-	Limite de caracteres. Atributo HTML padrão. Com showCount, o contador mostra o total e o limite (ex.: 12/200). O atributo impede a digitação além do limite, mas não corta um value passado pelo código; nesse caso, o contador fica com a cor de erro.
className	string	-	Classes CSS adicionais aplicadas ao textarea.