import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
import * as TextareaStories from './Textarea.stories'

<Meta of={TextareaStories} />

# Textarea

TextInput's look on a multi-line field that does not resize.

<Canvas of={TextareaStories.Filled} />

## When

- Several lines in a form or dialog — a description, a message body. Label
  it with a **Field**.

## When not

- One line → **TextInput**.
- Editing text where it is displayed → **EditableText** with `multiline`.

## How

```tsx
import { Textarea } from '@estiva-app/ui'

<Textarea rows={4} value={text} onChange={(e) => setText(e.target.value)} />
```

- Resizing is off by design — size it with `rows` or your layout.
- Native `<textarea>` with a ref; every native prop passes through. It is
  Base UI's `Field.Control` told to render a textarea since stage 3 — the
  part `Input` is built on — because Base UI has an `Input` and no
  textarea.
- **Inside a `Field`, the label names it. Add nothing.** Outside one, give
  it an `aria-label`.

## What it owns

It does these by itself. Write none of them around it.

| It does | So you never write | Refused when written by hand |
|---|---|---|
| Inside a `Field`, takes its name from the Field's label, and its error state | an `id` / `htmlFor` pair, or `aria-invalid` |  |

## Props

<Controls of={TextareaStories.Empty} />