---
title: Textarea
description: Multi-line text on a control fill. Resizes vertically.
---

```tsx
import { Textarea } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function TextareaBasic() {
  return (
    <Preview stack={true}>
      <Textarea.Root aria-label="Description" />
    </Preview>
  );
}
```

- Use it for free text that can run over several lines, such as a comment or an issue description. Use an [Input](/deft/components/input) for a single line.
- It starts a few lines tall and grows only when the reader drags it.
- Wrap it in a [Field](/deft/components/field) for a label and validation; an invalid field gives it a red ring. A bare textarea needs an `aria-label`.
- `variant="field"` puts it on a field fill with a thin border, for a textarea inside a [List](/deft/components/list).
- `font="mono"` sets Nordwand Mono at the code size, for lists of origins, headers or keys.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `variant?` | `"default" \| "field"` | `"default"` | |
| `font?` | `"sans" \| "mono"` | `"sans"` | |

Parts: `Root`. Other props go to the native `textarea`. Built on Base UI [Field](https://base-ui.com/react/components/field) `Control`.