# Textarea

A multi-line text box that grows with what's typed.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<Textarea aria-label="Message" placeholder="Type your message here." />
```

## Installation

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

## Usage

```tsx
import { Textarea } from "@/components/primitives/textarea";
```

```tsx
<Textarea />
```

## Size

Use the `size` prop to match the controls beside it. The text is 12px at `sm` and 13px otherwise, and 16px on a touch screen, so iOS doesn't zoom on focus.

```tsx
<Textarea size="sm" />
```

| Size      | Minimum height | Text |
| --------- | -------------- | ---- |
| `sm`      | 56px           | 13px |
| `default` | 64px           | 14px |
| `lg`      | 72px           | 14px |

## Disabled

Use the `disabled` prop on `Field` to disable the textarea and dim its label. On a bare textarea, use `disabled` on the textarea.

```tsx
<Field disabled>
  <FieldLabel>Message</FieldLabel>
  <Textarea placeholder="Type your message here." />
</Field>
```

## Invalid

Use the `invalid` prop on `Field` to mark the textarea. On a bare textarea, add `aria-invalid`.

```tsx
<Field invalid>
  <FieldLabel>Message</FieldLabel>
  <Textarea placeholder="Type your message here." />
  <FieldDescription>Please enter a valid message.</FieldDescription>
</Field>
```

## Button

Pair with `Button` to send what's typed.

```tsx
const styles = stylex.create({
  stack: { display: "grid", gap: space.xs },
});

<div {...stylex.props(styles.stack)}>
  <Textarea aria-label="Message" placeholder="Type your message here." />
  <Button variant="primary">Send message</Button>
</div>;
```

## Field

Use `Field`, `FieldLabel` and `FieldDescription` to give the textarea a label and helper text. They link to it on their own, so no `id` or `htmlFor` is needed.

```tsx
<Field>
  <FieldLabel>Message</FieldLabel>
  <FieldDescription>Enter your message below.</FieldDescription>
  <Textarea placeholder="Type your message here." />
</Field>
```

## API Reference

`Textarea` renders Base UI's `Field.Control` as a `<textarea>`, so inside a `Field` it takes the field's name, state and validation. It starts two rows tall and grows with its content; set `rows` for a taller start. It takes `size` and `sx`, applied last.