# Text area

Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle.

Kit part · Free · https://tactileui.dev/parts/textarea

- Element: `<textarea>`
- Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Text areas
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### Empty, with an example

```html
<label class="tui-field" style="width:240px"><span class="tui-label">Notes</span><textarea class="tui-textarea" placeholder="What changed in this take"></textarea></label>
```

### With a count hint

```html
<label class="tui-field" style="width:240px"><span class="tui-label">Description</span><textarea class="tui-textarea" aria-describedby="v-ta">Harbour survey, reel 3: wind noise from 12:40.</textarea><span class="tui-hint" id="v-ta">46 of 280 characters.</span></label>
```

## Every state

- Rest
- Focus
- Filled
- Error

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| Name | Kind | Values | What it does |
| - | - | - | - |
| .tui-textarea | class | on | The recess: 96px minimum, 12px inside, 1.5 line height, resizes vertically. |
| rows · maxlength | attribute | — | Native. Say the limit in a hint as well. |
| data-error | attribute | on .tui-field | Red hairline and red hint. |
| input · change | event | — | Native. |

## Markup

```html
<label class="tui-field">
  <span class="tui-label">Notes</span>
  <textarea class="tui-textarea" placeholder="What changed in this take"></textarea>
</label>
```

The demo on the page:

```html
<label class="tui-field" style="width:min(100%,420px)"><span class="tui-label">Notes</span><textarea class="tui-textarea" placeholder="What changed in this take"></textarea></label>
```

## Usage notes

Type a few lines, or drag the corner to make it taller.

## Accessibility

- Name it with the wrapping label; tie any hint to it with `aria-describedby`.
- If there is a length limit, print how much is left in the hint as people type.
- Keyboard: a native textarea. Enter adds a new line and Tab moves on to the next control.

## How it’s built

A native `<textarea>` in the field recess, with its height freed (`min-height: 96px`, `resize: vertical`) and padding on every side, so text never touches the walls.

## Rules

A placeholder is an example of what goes here, never the label.

The full rules are in `field.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.
- [Combo](https://tactileui.dev/parts/combo): One field with its one action in a shared well: subscribe, search, add.