# Textarea

> A textarea that grows with its content, with an optional character counter.

Component · Free · https://lodeui.com/components/textarea

## When to use

- Comments, descriptions and messages that span more than one line.

## When not to use

- Chat composers with attachments: use the prompt input.
- Single-line values: use an input.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/textarea.json
```

## Usage

```tsx title="example.tsx"
import { Textarea } from "@/components/ui/textarea";

export function Feedback() {
  return <Textarea aria-label="Feedback" placeholder="What could be better?" maxLength={500} showCount maxRows={8} />;
}
```

## API reference

### Textarea

A textarea that grows with its content up to a limit, with an optional character counter.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| rows | `number` | `3` | Starting height. |
| maxRows | `number` | `10` | Stops growing here and scrolls. |
| showCount | `boolean` | – | Shows used / maxLength. |
| invalid | `boolean` | – | Red border and aria-invalid. |
| ...props | `TextareaHTMLAttributes` | – | value, onChange, maxLength and the rest. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | New line |
| Tab | Leave the field |

## Accessibility

- Label it with Field, a <label> or aria-label.
- The counter is plain text next to the field.

## Motion

- Height changes instantly as you type, so the caret never lags.

## Responsive behavior

- Fills its container width.

## Performance

- Resizes by measuring scrollHeight on input only.

## Notes for AI

- Use maxLength with showCount rather than validating length afterwards.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.