---
title: "Textarea"
description: "Multi-line text input field"
source: "Equality"
---
import { Textarea } from "@eqtylab/equality";

## Overview

Textarea is a multi-line text field for longer free-form input such as comments, descriptions, or messages. It wraps a native `<textarea>`, so it accepts all standard textarea attributes and forwards a `ref` to the underlying element.

For single-line input use an [Input](input); pair the textarea with a [Label](label) via a shared `id`/`htmlFor`, or use it inside a [Form](form) field for validation and accessible wiring.

## Usage

Import the component:

```tsx
import { Textarea } from "@eqtylab/equality";
```

Basic usage:

```tsx
<Textarea placeholder="Enter your message here..." />
```

Controlled, driving the value yourself:

```tsx
const [value, setValue] = useState("");

<Textarea value={value} onChange={(e) => setValue(e.target.value)} />;
```

## Variants

### Default

<Textarea id="textarea-default" placeholder="Enter your message here..." />

### Disabled

<Textarea
  id="textarea-disabled"
  placeholder="Disabled textarea"
  disabled
  defaultValue="This textarea is disabled"
/>

### Custom Height

The textarea's height can be set with `className` (or the native `rows` attribute) for longer content.

<Textarea
  id="textarea-large"
  placeholder="Large textarea for longer content..."
  className="h-42"
/>

### Usage

```tsx
<Textarea placeholder="Enter your message here..." />
<Textarea placeholder="Disabled textarea" disabled />
<Textarea placeholder="Longer content..." className="h-42" />
<Textarea placeholder="By rows" rows={5} />
```

## Props

Textarea accepts all standard `<textarea>` attributes (`placeholder`, `value`, `defaultValue`, `onChange`, `rows`, `maxLength`, `disabled`, etc.) plus `className`. It does not add any props of its own.

| Name        | Description                                     | Type     | Default | Required |
| ----------- | ----------------------------------------------- | -------- | ------- | -------- |
| `className` | Additional CSS classes applied to the textarea. | `string` | —       | ❌       |