# Auto textarea (goodtabs UI)

A textarea that grows with its content between a minimum and a maximum, then scrolls.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/auto-textarea.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/auto-textarea`

## Usage

```tsx
import { AutoTextarea } from "@/components/ui/auto-textarea"

<AutoTextarea placeholder="Leave a comment" minRows={2} maxRows={8} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| minRows | `number` | `2` | Rows shown before there is any content. |
| maxRows | `number` | `8` | Rows it grows to before it starts to scroll. |

## When to use

- Comments, notes and descriptions where the length is unknown
- Chat and message fields that should start small and grow
- Replacing a resize handle with something that just fits

## When not to use

- Long documents or code, where a fixed tall editor is better
- Single-line values: use an Input
- Layouts where the field must never change height, such as a table cell

## Notes for agents

- Client component. It extends shadcn's Textarea, so value, onChange, maxLength and every textarea prop pass through
- Height comes from scrollHeight, set as an inline style; it re-measures on input, when the controlled value changes and when the width changes
- rows is set to minRows, so the first server render is already the right size
- Set the line height with a text or leading class if you change the font size; the row maths reads it from computed style

Docs: https://ui.goodtabs.co/components/auto-textarea