A client-side textarea component with optional label, error state, and start/end icon adornments. Supports both a bare layout (border on the `

` itself) and an adorned layout (border lifted onto a `<label>` wrapper) that auto-sizes via CSS `field-sizing: content`.

## Key Components

| Export | Type | Description |
|---|---|---|
| `Textarea` | `React.ForwardRefExoticComponent` | Main textarea with full design-system styling |
| `TextareaProps` | `interface` | Extends `React.TextareaHTMLAttributes<HTMLTextAreaElement>` |

### `TextareaProps` notable fields

| Prop | Type | Default | Description |
|---|---|---|---|
| `invalid` | `boolean` | `false` | Renders red error border and ring |
| `label` | `string` | — | Label rendered above the field |
| `error` | `string` | — | Error message below the field; also sets invalid state |
| `startIcon` | `ReactNode` | — | Adornment at the left edge (renders verbatim) |
| `endIcon` | `ReactNode` | — | Adornment at the right edge |
| `endIconAsButton` | `boolean` | `false` | Wraps `endIcon` in a styled `<button>` |
| `endIconButtonProps` | `ButtonHTMLAttributes` | — | Extra props for the end-icon button |
| `hideBorder` | `boolean` | `false` | Suppresses border/bg/radius (outer container owns chrome) |

## Usage Example

```typescript
import { Textarea } from "@openframe-oss-lib/ui"
import { SendIcon, PlusIcon } from "lucide-react"

// Basic textarea with validation
<Textarea
  label="Message"
  placeholder="Type your message…"
  error="Message is required"
/>

// Composer-style with start + end icons
<Textarea
  placeholder="Ask anything…"
  startIcon={<PlusIcon />}
  endIcon={<SendIcon />}
  endIconAsButton
  endIconButtonProps={{
    "aria-label": "Send message",
    onClick: handleSend,
    disabled: isPending,
  }}
  hideBorder
/>
```

## Source

[`textarea.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/textarea.tsx)