# Textarea

> Multi-line text in the TextInput box, resizable vertically, with an optional character count.

Category: Forms. Docs page: https://rime.mjsons.net/components/textarea

## Installation

```bash
npx shadcn@latest add KezLahd/rime/textarea
```

Textarea wears the TextInput box and tokens. showCount with maxLength shows a live count that turns to warning ink near the limit.

## Usage

```tsx
import { Field, Textarea } from "@/components/ui";

<Field label="Note for the customer">
  <Textarea maxLength={1000} showCount rows={4} />
</Field>
```

## Props: Textarea

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `invalid` | `boolean` |  |  |
| `showCount` | `boolean` |  | Shows "n / max" under the box. Requires maxLength and a controlled value. |

Also accepts the native attributes of: AriaAttributes, DOMAttributes, HTMLAttributes, TextareaHTMLAttributes.

## Examples

### With a count

```tsx
<Textarea maxLength={280} showCount placeholder="Plain language." />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--input-font-size` | `var(--text-input)` |
| `--input-pad-x` | `calc(14px * var(--density))` |

System tokens it reads: `--density`, `--font-body`, `--ink-body`, `--ink-disabled`, `--ink-muted`, `--ink-placeholder`, `--text-caption`, `--text-input`, `--warning-ink`.

## Accessibility

- Wrap it in <Field label=…>: Field wires the label, hint and error to the control (id, aria-describedby, aria-invalid) through context, so the control needs no ids of its own.
- The count sits in a polite live region tied to the textarea by aria-describedby.

## Do

- Give a maxLength whenever the server has one.

## Don't

- Don't disable resize; vertical resize is the user's.