# Textarea

> Multi-line text entry with optional auto-resize and a character counter.

Category: Forms · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/textarea

Use Textarea for free text that may span several lines: messages to signers, disclaimers, notes. Turn on autoResize so the field grows with its content up to maxRows, and showCount when there is a length limit.

## Import

```tsx
import { Textarea, FormField } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { FormField, Textarea } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <FormField label="Message to signers" description="Included in the signing request email.">
        <Textarea placeholder="Please review and sign the attached agreement by Friday." />
      </FormField>
    </div>
  );
}
```

### Auto-resize

```tsx
import { FormField, Textarea } from '@bindshq/stance-react';

export function AutoResize() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <FormField label="Internal notes">
        <Textarea
          autoResize
          rows={2}
          maxRows={6}
          defaultValue={'Renewal terms agreed on the call.\nLegal to confirm the liability cap.'}
        />
      </FormField>
    </div>
  );
}
```

### Character count

The count is linked by aria-describedby and turns red past the limit.

```tsx
import { FormField, Textarea } from '@bindshq/stance-react';

export function CharacterCount() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <FormField label="Email disclaimer">
        <Textarea
          showCount
          maxLength={280}
          defaultValue="This email and any attachments are confidential and intended solely for the addressee."
        />
      </FormField>
    </div>
  );
}
```

### Invalid

```tsx
import { FormField, Textarea } from '@bindshq/stance-react';

export function Invalid() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <FormField
        label="Reason for rejection"
        error="Tell the sender why you are rejecting the document"
        required
      >
        <Textarea />
      </FormField>
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Textarea | `autoResize` | `boolean` | `false` | Grow with content between rows and maxRows. |
| Textarea | `rows` | `number` | `3` | Initial visible rows. |
| Textarea | `maxRows` | `number` | `12` | Maximum rows when auto-resizing; then it scrolls. |
| Textarea | `showCount` | `boolean` | `false` | Show a counter; uses maxLength as the limit. |
| Textarea | `resize` | `'none' \| 'vertical' \| 'both'` | `'vertical'` | Manual resize handle (ignored with autoResize). |
| Textarea | `invalid` | `boolean` | None | Marks the field invalid. |
| Textarea | `wrapperClassName` | `string` | None | Class for the outer field box. |
| Textarea | `...props` | `TextareaHTMLAttributes` | None | Native textarea attributes. |

## Accessibility

- Integrates with FormField for label, description, error and required state.
- The character count is included in the accessible description and read on focus, rather than announced on every keystroke.
- maxLength stops input at the limit natively; omit it and validate on submit if you prefer to let users paste then trim.

## Keyboard

| Keys | Action |
| --- | --- |
| `Enter` | Inserts a new line (does not submit the form). |

## Related

- https://stanceui.com/components/input
- https://stanceui.com/components/form-field
- https://stanceui.com/components/rich-text