Textarea

Um campo de várias linhas para texto livre: uma descrição, uma instrução, uma nota.

Nesta página

Playground

Observação

Estado

Texto

Fundo

HTML

<div class="feitio-field"><label class="feitio-label" for="pg-ta">Observação</label><textarea class="feitio-textarea" id="pg-ta" rows="3">Me lembre de trocar as fotos do catálogo.</textarea></div>

Quando usar

Quando a resposta tem mais de uma frase.

Quando não usar

Para uma resposta curta: TextInput. Uma caixa grande pede um texto grande.

Exemplos

NotaAté 500 caracteres

Uma nota

O limite de caracteres, quando existe, vem na dica antes, não só quando passar.

Mostrar código

HTML

<div class="feitio-field">
  <label class="feitio-label" for="nota">Nota</label>
  <span class="feitio-hint" id="nota-dica">Até 500 caracteres</span>
  <textarea class="feitio-textarea" id="nota" rows="3" aria-describedby="nota-dica"></textarea>
</div>

Estados

Vazio, com exemplo

Preenchido

Foco

Erro

Use até 500 caracteres

Desativado

A pessoa pode esticar a altura; a largura acompanha a coluna.

Atributos

Atributo	Valores	Para quê
`class="feitio-textarea"`	obrigatório	A forma do campo.
`rows`	número	A altura inicial.
`aria-invalid="true"`	com erro	O traço em vinho.