# Textarea

A multi-line field for free text: a description, an instruction, a note.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-ta">Note</label><textarea class="feitio-textarea" id="pg-ta" rows="3">Remind me to replace the catalog photos.</textarea></div>
```

## When to use

-   When the answer has more than one sentence.

## When not to use

-   **For a short answer:** TextInput. A big box asks for a big text.

## Examples

### A note

The character limit, when there is one, comes in the hint beforehand, not only once exceeded.

Show code

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

## States

Empty, with placeholder

Filled

Focus

Error

Use up to 500 characters

Disabled

## Accessibility

-   The person can stretch the height; the width follows the column.

## Attributes

Attribute

Values

What for

`class="feitio-textarea"`

required

The field’s shape.

`rows`

number

The initial height.

`aria-invalid="true"`

with an error

The wine line.