# Textarea

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

## Playground

```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

### 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

## Acessibilidade

-   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.