# Textarea

```mdx
<textarea class="textarea" placeholder="Type your message here"></textarea>
```

## Usage

<Steps>
  <Step title="Include CSS">

Import Tailwind and one full Basecoat style bundle.

```css
@import "tailwindcss";
@import "basecoat-css/vega.css";
```

Or import only the base CSS, Textarea component CSS, and one style pack.

```css
@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/textarea.css";
@import "basecoat-css/styles/vega.css";
```

Using CDN or bundler imports? See the [Installation page](/installation).

  </Step>
  <Step title="Add your textarea HTML">

Add `class="textarea"` to a `<textarea>` element. Textareas inside a `class="field"` container also receive the same styling automatically.

Use native HTML attributes for behavior: `disabled` for disabled textareas and `aria-invalid="true"` for invalid state styling.

```html
<textarea class="textarea" placeholder="Type your message here"></textarea>
```

  </Step>
</Steps>

Textareas support right-to-left layouts through native browser direction handling.

## Examples

### Field

Use `field` with a label and description to create an accessible textarea.

```mdx
<div role="group" class="field">
  <label for="textarea-field">Message</label>
  <textarea id="textarea-field" placeholder="Type your message here"></textarea>
  <p>Write a short message.</p>
</div>
```

### Disabled

```mdx
<textarea class="textarea" placeholder="Type your message here" disabled></textarea>
```

### Invalid

```mdx
<div role="group" class="field w-full max-w-xs">
  <label for="textarea-invalid">Message</label>
  <textarea class="textarea" id="textarea-invalid" placeholder="Type your message here" aria-invalid="true"></textarea>
  <p>Message is required.</p>
</div>
```

### Button

```mdx
<div class="grid w-full max-w-xs gap-3">
  <textarea class="textarea" placeholder="Type your message here"></textarea>
  <button type="submit" class="btn">Submit</button>
</div>
```

### Form

```mdx
<form class="w-full max-w-sm space-y-6">
  <div role="group" class="field">
    <label for="textarea-form">Bio</label>
    <textarea id="textarea-form" placeholder="Tell us a bit about yourself"></textarea>
    <p>You can @mention other users and organizations.</p>
  </div>
  <button type="submit" class="btn">Submit</button>
</form>
```

### RTL

Add `dir="rtl"` to the textarea, field, or an ancestor.

```mdx
<div role="group" class="field w-full max-w-xs" dir="rtl">
  <label for="textarea-rtl">التعليقات</label>
  <textarea id="textarea-rtl" placeholder="تعليقاتك تساعدنا على التحسين..." rows="4"></textarea>
  <p>شاركنا أفكارك حول الخدمة.</p>
</div>
```