# Text area

A multi-line text field for longer input, such as descriptions or comments. Pair it with a visible label, using [Field](/components/field.md) or [Control and label](/components/control-and-label.md).

```tsx
// demo.tsx
import {Field, TextArea} from '@earendil-works/elanor-react';

export default function TextAreaDemo() {
  return (
    <Field.Root name="description">
      <Field.Label>Project description</Field.Label>
      <TextArea
        rows={4}
        maxLength={240}
        defaultValue="A shared space for our team's design reviews and release notes."
      />
      <Field.Description>Up to 240 characters.</Field.Description>
    </Field.Root>
  );
}
```

## Usage

```tsx
import {Field, TextArea} from '@earendil-works/elanor-react';

<Field.Root name="description">
  <Field.Label>Project description</Field.Label>
  <TextArea rows={4} />
</Field.Root>;
```

`rows` sets the initial height. State a `maxLength` in the description, as the demo does.

## Monospace

Set `monospace` for code, such as JSON or configuration. It only changes the typeface; turn off spell check, autocorrect, and autocapitalization yourself.

```tsx
// monospace.tsx
import {Field, TextArea} from '@earendil-works/elanor-react';

export default function TextAreaMonospace() {
  return (
    <Field.Root name="configuration">
      <Field.Label>Configuration</Field.Label>
      <TextArea
        monospace
        rows={6}
        spellCheck={false}
        autoCapitalize="none"
        autoCorrect="off"
        defaultValue={JSON.stringify(
          {name: 'design-reviews', public: false, retention: 30},
          null,
          2,
        )}
      />
      <Field.Description>A JSON object.</Field.Description>
    </Field.Root>
  );
}
```

## API

### `TextArea`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onValueChange` | `BaseField.Control.Props['onValueChange']` | - | Called with the new value on each change. |
| `monospace` | `boolean` | `false` | Uses the code typeface, for input such as JSON or configuration. |

Renders `<textarea>`. Also accepts its HTML attributes and `ref`.