</div>

```astro
---
---

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

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add textarea
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add textarea
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add textarea
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add textarea
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---

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

## Examples

### Invalid

Set `aria-invalid="true"` to show the error state. Wrap the textarea in a `Field` with a `FieldError` to describe the problem.

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Field data-invalid="true" class="w-full max-w-sm"> <FieldLabel for="message-invalid">{"Message"}</FieldLabel> <Textarea id="message-invalid" placeholder="Type your message here..." aria-invalid="true" aria-describedby="message-invalid-error" /> <FieldError id="message-invalid-error">{"Message is required."}</FieldError> </Field>
</div>

```astro
---
---

<Field data-invalid="true" class="w-full max-w-sm">
  <FieldLabel for="message-invalid">Message</FieldLabel>
  <Textarea
    id="message-invalid"
    placeholder="Type your message here..."
    aria-invalid="true"
    aria-describedby="message-invalid-error"
  />
  <FieldError id="message-invalid-error">Message is required.</FieldError>
</Field>
```