# Textarea

A multi-line text field that grows with its content.

Source: [textarea.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/textarea.tsx)

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaBasic() {
  return (
    <Field className="max-w-md">
      <FieldLabel>Description</FieldLabel>
      <Textarea
        placeholder="What is this project about?"
        defaultValue="Refresh the marketing site with the new brand, rebuild the pricing page and move the blog to the new CMS."
      />
    </Field>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/textarea
```

## Usage

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export function NotesField() {
  return (
    <Field>
      <FieldLabel>Notes</FieldLabel>
      <Textarea />
    </Field>
  );
}
```

The textarea grows with its content. Cap it with a class such as `max-h-60`. Like an input, it
needs a label, such as a `FieldLabel` in a [Field](https://ui.jarv.is/components/field.md), or an `aria-label`.

## Examples

### Invalid

Set `invalid` on its `Field` to mark the textarea as invalid. On its own, set `aria-invalid`.

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaInvalid() {
  return (
    <Field invalid className="max-w-md">
      <FieldLabel>Feedback</FieldLabel>
      <Textarea defaultValue="Too short" />
    </Field>
  );
}
```

### Disabled

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaDisabled() {
  return (
    <Field className="max-w-md">
      <FieldLabel>Comments</FieldLabel>
      <Textarea disabled placeholder="Comments are turned off" />
    </Field>
  );
}
```

## Props

| Part | Extends |
| --- | --- |
| `Textarea` | `<textarea>` |

The tables leave out `className`, `style` and `render`. Parts built on Base UI take them as its [styling](https://base-ui.com/react/handbook/styling) and [composition](https://base-ui.com/react/handbook/composition) guides describe.