---
title: Textarea
description: "Displays a multi-line text input."
---

```tsx
import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Textarea } from '@/components/ui/textarea';

export default function TextareaDemo() {
  return (
    <div {...stylex.props(styles.wrap)}>
      <Textarea placeholder="Type your message here." />
    </div>
  );
}

const styles = stylex.create({
  wrap: {
    width: container.lg,
  },
});
```

## Install

```bash
npx shadcn@latest add @madeui/textarea
```

## Usage

```tsx
import { Textarea } from '@/components/ui/textarea';

<Textarea placeholder="Type your message here." />
```

## With field

Use `Field`, `FieldLabel`, and `FieldDescription` to create a textarea with a label and description.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Field, FieldDescription, FieldLabel } from '@/components/ui/field';
import { Textarea } from '@/components/ui/textarea';
import { container } from '@/lib/constants.stylex';

export default function TextareaWithField() {
  return (
    <Field style={styles.root}>
      <FieldLabel htmlFor="textarea-with-field-bio">Bio</FieldLabel>
      <Textarea
        id="textarea-with-field-bio"
        placeholder="Tell us a little about yourself"
      />
      <FieldDescription>
        You can @mention other users and organizations.
      </FieldDescription>
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.lg,
  },
});
```

## Disabled

```tsx
import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Textarea } from '@/components/ui/textarea';

export default function TextareaDisabled() {
  return (
    <div {...stylex.props(styles.wrap)}>
      <Textarea placeholder="Disabled" disabled />
    </div>
  );
}

const styles = stylex.create({
  wrap: {
    width: container.lg,
  },
});
```

## Invalid

Set `invalid` on `Field` to show validation errors — the label and error message pick up the invalid styling, and `aria-invalid` is applied to the textarea automatically.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { Textarea } from '@/components/ui/textarea';
import { container } from '@/lib/constants.stylex';

export default function TextareaInvalid() {
  return (
    <Field invalid style={styles.root}>
      <FieldLabel htmlFor="textarea-invalid-bio">Bio</FieldLabel>
      <Textarea id="textarea-invalid-bio" defaultValue="Hi" />
      <FieldError>Bio must be at least 10 characters.</FieldError>
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.lg,
  },
});
```

## API reference

### Textarea

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `disabled` | `boolean` | `false` |  |
| `style` | `StyleXStyles` | — | StyleX styles merged last — always win over the component's own styles. |

All native `<textarea>` props are forwarded.