# TextArea

## Overview

Textarea with optional label wrapper and design-system focus/invalid styles. Accepts all native `<textarea>` props.

---

## Props

| Prop             | Type                               | Default     | Description                                                          |
| ---------------- | ---------------------------------- | ----------- | -------------------------------------------------------------------- |
| `label`          | `React.ReactNode`                  | `undefined` | Optional label text/node above the textarea.                         |
| `labelClassName` | `string`                           | `undefined` | Classes for `Label`.                                                 |
| `wrpClassName`   | `string`                           | `undefined` | Wrapper classes.                                                     |
| `id`             | `string`                           | `auto`      | If omitted and `label` is provided, an id is generated.              |
| `...props`       | `React.ComponentProps<'textarea'>` | —           | All native textarea props (e.g., `rows`, `placeholder`, `disabled`). |

---

## Behavior

- **Auto id**: When `label` exists and `id` is not provided, an id is generated and linked via `Label htmlFor`.
- **Styling**: Uses DS tokens for border, focus ring, disabled, and invalid states (`aria-invalid`).

---

## Example

```tsx
import { Textarea } from "laif-ds";

export function Example() {
  return (
    <Textarea
      label="Descrizione"
      placeholder="Scrivi qui..."
      defaultValue="Testo di esempio"
      rows={4}
      wrpClassName="w-[500px]"
    />
  );
}
```

---

## Notes

- **Validation**: Add `aria-invalid` to reflect error state.
- **Resize**: Control with native CSS `resize` via `className` if needed.