# Textarea

Textarea is a neobrutalist React component from Cruise UI. Multi-line text styled like the inputs, with auto-grow and a character counter.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/textarea
```

Import: `import { CruiseTextarea } from "@/components/cruise/textarea";`

## When to use

Longer free text: delivery notes, messages, reviews.

## When not to

One-line answers (use an Input).

## Example (React)

```tsx
import { CruiseTextarea } from "@/components/cruise/textarea";

export default function TextareaExample() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <CruiseTextarea label="Delivery note" placeholder="Gate code, landmark, who to call…" maxLength={500} autoGrow />
      <CruiseTextarea label="Message" defaultValue="Hi," error="Tell us a bit more (at least 20 characters)." />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<div class="field">
  <label class="field-label" for="note">Delivery note</label>
  <textarea class="textarea" id="note" maxlength="500" aria-describedby="note-count" data-autogrow></textarea>
  <p class="field-count" id="note-count">0 / 500</p>
</div>
```

## Props: CruiseTextarea

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label?` | `string` | — | Visible label. Leave out inside a CruiseFormField (it brings the label). |
| `hint?` | `string` | — | — |
| `error?` | `string` | — | — |
| `autoGrow?` | `boolean` | `false` | Grows with its content instead of scrolling (still resizable). |
| `showCount?` | `boolean` | `false` | Shows "120 / 500" under the box; needs maxLength, or shows the count alone. |

Also takes every native `<textarea>` attribute.

## Accessibility

- A visible label (or a FormField around it).
- The counter ("120 / 500") is linked with aria-describedby.
- 17px text, so iOS doesn't zoom in on focus.