# Textarea

A multi-line text field.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Textarea.tsx)

## Overview

A textarea is a native multi-line text field registered as the control of its enclosing field.

Use it for multi-line answers, and set `rows` to the expected length of the answer.

## Examples

### Basic

```tsx
import { Field, style, Textarea } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Field.Root>
        <Field.Label>Notes</Field.Label>
        <Textarea placeholder="Add a note" />
      </Field.Root>
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Textarea/Basic.tsx)

### Variant

The textarea follows the `variant` of its `Field.Root`, such as `stacked` or `card`.

```tsx
import { Field, style, Textarea } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Field.Root variant="stacked">
        <Field.Label>Notes</Field.Label>
        <Textarea defaultValue="Paid in full" />
      </Field.Root>
      <Field.Root variant="card">
        <Field.Label>Memo</Field.Label>
        <Textarea defaultValue="Rent for May" />
      </Field.Root>
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Textarea/Variant.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Field, style, Textarea } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Field.Root key={size}>
          <Field.Label>Single row</Field.Label>
          <Textarea placeholder="Add a note" resize="none" rows={1} size={size} />
        </Field.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Textarea/Size.tsx)

### Resize

Set `resize` to `vertical`, `none`, or `auto`, which grows with its content. It defaults to `vertical`.

```tsx
import { Field, style, Textarea } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Field.Root>
        <Field.Label>Grows with content</Field.Label>
        <Textarea resize="auto" rows={1} />
      </Field.Root>
      <Field.Root>
        <Field.Label>Fixed height</Field.Label>
        <Textarea placeholder="Add a note" resize="none" />
      </Field.Root>
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Textarea/Resize.tsx)

### Invalid

Set `invalid` on `Field.Root` and add a `Field.Error` to show a validation message.

```tsx
import { Field, style, Textarea } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Field.Root invalid>
        <Field.Label>Notes</Field.Label>
        <Textarea defaultValue="Too short" />
        <Field.Error match>Write at least 20 characters.</Field.Error>
      </Field.Root>
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Textarea/Invalid.tsx)

### Disabled

Set `disabled` on `Field.Root` to disable the textarea.

```tsx
import { Field, style, Textarea } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Field.Root disabled>
        <Field.Label>Disabled</Field.Label>
        <Textarea defaultValue="Locked" />
      </Field.Root>
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Textarea/Disabled.tsx)

## Guidelines

TODO: Write guidelines for Textarea.