# Textarea

## Overview

A multi-line text input for longer content: descriptions, notes, messages, and rich text fields. Automatically resizable or fixed, depending on the `resize` CSS class applied.

---

## When to Use

- Bio, description, or notes fields in forms
- Message composition in chat or email forms
- Multi-line configuration values

## When NOT to Use

- Single-line inputs — use `<Input>` instead.
- Never use native `<textarea>` — always use `<Textarea>` from `xertica-ui`.

---

## Props

All native `<textarea>` HTML attributes are forwarded.

| Prop          | Type                   | Default | Description                                                                   |
| ------------- | ---------------------- | ------- | ----------------------------------------------------------------------------- |
| `size`        | `'sm' \| 'md' \| 'lg'` | `'md'`  | Size variant controlling padding and font size. Matches Input's sizing scale. |
| `placeholder` | `string`               | —       | Placeholder text                                                              |
| `disabled`    | `boolean`              | `false` | Disables interaction                                                          |
| `className`   | `string`               | —       | Additional CSS classes                                                        |
| `rows`        | `number`               | —       | Initial height in rows                                                        |

> **Note:** The `size` prop controls padding and font size only — not height. Use the `rows` prop to control vertical height.

---

## Examples

### Basic Usage

```tsx
import { Textarea } from 'xertica-ui/ui';

<Textarea placeholder="Write a description..." />;
```

### Non-Resizable (fixed height)

```tsx
<Textarea className="resize-none" rows={4} placeholder="Your message..." />
```

### Inside react-hook-form

```tsx
<FormField
  control={form.control}
  name="bio"
  render={({ field }) => (
    <FormItem className="col-span-full">
      <FormLabel>Bio</FormLabel>
      <FormControl>
        <Textarea placeholder="Tell us about yourself..." className="resize-none" {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>
```

---

## AI Rules

- **Sizing** — The `size` prop controls padding and font, matching `Input`, `SelectTrigger`, and `Search`. Use the same `size` across all form elements for consistent alignment.
- In form grids, `<Textarea>` fields always use `className="col-span-full"` to span the full width.
- Use `className="resize-none"` in most corporate contexts — free resize can break card/panel layouts.
- Always spread `{...field}` when used inside `react-hook-form` `FormField`.

---

## Related Components

- [`Input`](./input.md) — Single-line text input
- [`Form`](./form.md) — Form integration context