---
title: Textarea
description: UI element for multi-line text input, enabling users to enter data or information.
links:
  source: https://github.com/lmsqueezy/wedges/blob/main/packages/wedges/src/components/Textarea/Textarea.tsx
---

<PreviewComponent name="textarea/preview" />

### Usage

```tsx
import { Textarea } from "@lemonsqueezy/wedges";
```

```tsx showLineNumbers
<Textarea />
```

### API Reference

In addition to all the props defined as `TextareaHTMLAttributes<HTMLTextAreaElement>`, `Textarea` component also includes the following props:

<PropsTable
  content={[
    [
      {
        value: "disabled",
        description:
          "If set to `true`, additional styles will be applied to indicate that the textarea is disabled.",
      },
      {
        value: "boolean",
      },
      { value: "false" },
    ],
    [
      {
        value: "required",
        description:
          "If set to `true`, additional styles will be applied to indicate that the textarea is required.",
      },
      { value: "boolean" },
      { value: "false" },
    ],
    [
      {
        value: "tooltip",
        description: "Optional description of the textarea, shown on hover.",
      },
      { value: "ReactNode" },
      {},
    ],
    [
      { value: "description", description: "Additional information displayed next to the label." },
      { value: "ReactNode" },
      {},
    ],
    [
      {
        value: "label",
        description: "Label of the textarea.",
      },
      { value: "ReactNode" },
      {},
    ],
    [
      {
        value: "destructive",
        description:
          "Specifies whether this textarea has a destructive styling. If set to `true`, the textarea will be styled differently to indicate a destructive action.",
      },
      {
        value: "boolean",
      },
      { value: "false" },
    ],
    [
      {
        value: "helperText",
        description:
          "Additional text or information to guide the user. It's rendered below the textarea.",
      },
      {
        value: "ReactNode",
      },
      {},
    ],
  ]}
/>

### Examples

The textarea in the example below is marked as `required`. It also includes a `tooltip` and is styled with a `destructive` theme.

<PreviewComponent name="textarea/example-1" />

More examples:

<PreviewComponent name="textarea/example-2" />