# Text Area Field

A labeled multi-line text field with optional description, hint, and error messaging.

## Installation

```tsx
import { TextAreaField } from "@makeplane/propel/components/text-area-field";
```
## Usage

```tsx
import { TextAreaField } from "@makeplane/propel/components/text-area-field";

export default function BasicDemo() {
  return (
    <TextAreaField
      size="lg"
      resize="vertical"
      label="Comment"
      placeholder="Leave a comment..."
      description="Share your thoughts on the proposal."
      hint="Markdown is supported."
    />
  );
}
```
## Examples

### Sizes

`size` steps the value font-size and the field min-height; padding and radius stay fixed.

```tsx
import {
  TextAreaField,
  type TextAreaFieldSize,
} from "@makeplane/propel/components/text-area-field";

const SIZES: TextAreaFieldSize[] = ["lg", "xl", "2xl"];

export default function SizesDemo() {
  return (
    <div className="flex flex-col items-start gap-4">
      {SIZES.map((size) => (
        <TextAreaField
          key={size}
          size={size}
          resize="vertical"
          label={size}
          placeholder="Leave a comment..."
        />
      ))}
    </div>
  );
}
```

### Resize

The `resize` prop controls the native drag handle: `vertical` allows height changes, `none` locks the size. (`both` frees the width too, but a labeled field usually sits in a form column with no room to spare — see the bare [Text Area](/components/text-area#resize) for that case.)

```tsx
import { TextAreaField } from "@makeplane/propel/components/text-area-field";

export default function ResizeDemo() {
  return (
    <div className="flex flex-col gap-4">
      <TextAreaField
        size="lg"
        resize="vertical"
        label="Resize vertical"
        placeholder="Leave a comment..."
      />
      <TextAreaField size="lg" resize="none" label="Resize none" placeholder="Leave a comment..." />
    </div>
  );
}
```

### Auto resize

`autoResize` grows the field with its value (size min-height as the floor) and turns the native
resize handle off. `maxRows` caps the visible lines; further content scrolls.

```tsx
import { TextAreaField } from "@makeplane/propel/components/text-area-field";

export default function AutoResizeDemo() {
  return (
    <TextAreaField
      size="lg"
      autoResize
      maxRows={8}
      rows={2}
      label="Comment"
      placeholder="Type to grow the field…"
    />
  );
}
```

### Invalid

Setting `error` overrides `hint`, marks the field invalid (`aria-invalid`), and recolors the border to danger.

```tsx
import { TextAreaField } from "@makeplane/propel/components/text-area-field";

export default function InvalidDemo() {
  return (
    <TextAreaField
      size="lg"
      resize="vertical"
      label="Comment"
      defaultValue="No"
      error="Add a little more detail."
      required
    />
  );
}
```

### Controlled

```tsx
import { TextAreaField } from "@makeplane/propel/components/text-area-field";
import * as React from "react";

export default function ControlledDemo() {
  const [value, setValue] = React.useState("");

  return (
    <TextAreaField
      size="lg"
      resize="vertical"
      label="Comment"
      placeholder="Leave a comment..."
      value={value}
      onChange={(event) => setValue(event.target.value)}
      hint={`${value.length} characters`}
    />
  );
}
```
## API Reference

### TextAreaField

Multi-line text field built on Base UI `Field`, rendering the control as a `<textarea>`. Vertical
layout only. `autoResize` grows the control with its value and disables the native resize
handle.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` (required) | `"lg" \| "xl" \| "2xl"` | — | Size scale. `lg` \| `xl` \| `2xl`. |
| `defaultValue` | `string \| number \| readonly string[]` | — | The default value of the textarea. Use when uncontrolled. |
| `required` | `boolean` | — | Marks the field required: adds a `*` asterisk and sets `aria-required`. The native `required` attribute is deliberately not rendered, so browser constraint validation never intercepts form submits ahead of the app's own validation. |
| `value` | `string \| number \| readonly string[]` | — | The value of the textarea. Use when controlled. |
| `autoResize` | `boolean` | `false` | Grow the control with its value, using the size min-height as the floor. Pair the `field` surface with `TextAreaGroup` `resize="none"` so the native drag handle does not fight content-driven height. Grow the control with its value, using the size min-height as the floor. Disables the native resize handle. |
| `maxRows` | `number` | — | Maximum visible lines when `autoResize` is set. Further lines scroll inside the control. Unbounded when omitted. |
| `resize` | `"none" \| "both" \| "vertical"` | `"vertical"` | Native resize handle on the bordered frame. Forced to `none` when `autoResize` is set, so the drag handle does not fight content-driven height. |
| `label` | `string` | — | Label text shown above the control. |
| `description` | `ReactNode` | — | Supporting text shown directly below the label. |
| `hint` | `ReactNode` | — | Helper text shown below the control. Replaced by `error` when an error is set. |
| `error` | `ReactNode` | — | Error text shown below the control. Overrides `hint` and marks the field invalid (danger border). |