# Textarea

Status: stable

Several lines of text.

Textareas take several lines of free text: a note to a tenant, a description of a repair. They look and behave like a text input, but are taller and can be resized up and down.

## Example

```html
<div class="at-field"><label class="at-label" for="d-note">Note to tenant</label><textarea class="at-textarea" id="d-note" rows="4"></textarea></div>
```

## Anatomy

1. **Label**: font-size: var(--at-text-sm) /* 14px */; font-weight: var(--at-weight-bold)

2. **Hint (optional)**: font-size: var(--at-text-sm); color: var(--at-text-subtle)

3. **Field**: min-height: 5rem /* 80px */; resize: vertical; padding: var(--at-space-3) /* 8px */; border: 1px solid var(--at-border); border-radius: var(--at-radius-1) /* 6px */

## Size and spacing

- **Field**: min-height: 5rem /* 80px */; width: 100% of its container; set rows="4" or more for longer text

- **Type**: font-size: var(--at-text-md) /* 16px */; stops phones zooming in on focus

## Variants

### Textarea

Set rows to roughly how much text you expect, so the box hints at the answer length.

```html
<div class="at-field"><label class="at-label" for="v-desc">Describe the repair</label><textarea class="at-textarea" id="v-desc" rows="4"></textarea></div>
```

| State | Specification |

|---|---|

| Default | border: 1px solid var(--at-border) |

| Hover | border-color: var(--at-text-subtle) |

| Focus | outline: 3px solid var(--at-border-focus); outline-offset: 2px |

| Error | border: 2px solid var(--at-border-danger); plus an .at-error message |

| Disabled | opacity: 0.5; cursor: not-allowed |

## When to use

- Free text that may run to more than one line.

## When not to use

- A name, reference or amount: use a text input.
- A fixed set of answers: use radios or a select.

## Content

- If there is a length limit, say so in the hint: "Up to 500 characters".
- Do not use placeholder text as the label.

## Do and don't

Do: A visible label, and the limit in the hint.

```html
<div class="at-field"><label class="at-label" for="dd-t1">Describe the repair</label><p class="at-hint">Up to 500 characters.</p><textarea class="at-textarea" id="dd-t1" rows="4"></textarea></div>
```

Don't: One row high, with a placeholder instead of a label.

```html
<textarea class="at-textarea" rows="1" placeholder="Describe the repair..." aria-label="Repair"></textarea>
```

## Do

- Size it to the expected length with rows.

## Don't

- Turn off resizing.

## Code

```html
<div class="at-field">
  <label class="at-label" for="note">Note to tenant</label>
  <textarea class="at-textarea" id="note" rows="4"></textarea>
</div>
```

## Classes

| Class | What it does |

|---|---|

| `at-textarea` | Multi-line input, resizes vertically |

## Tokens

`--at-border`, `--at-surface`, `--at-text`, `--at-border-bold`

## Accessibility

- Same labelling as a text input.