Textarea

A Tailwind CSS textarea component for multi-line text input.

<div class="w-full max-w-xs">
  <textarea class="textarea" placeholder="Tell us what you think..."></textarea>
</div>

With label

Pair with a Label and wrap in a Field for accessible form fields. Connect them using matching for and id attributes so clicking the label focuses the textarea and screen readers announce it correctly.

Message

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="message">Message</label>
    <textarea
      class="textarea"
      id="message"
      name="message"
      placeholder="Tell us what you think..."
    ></textarea>
  </div>
</div>

Disabled

Add disabled to prevent interaction. The textarea appears faded automatically.

Message

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="disabled-message">Message</label>
    <textarea
      class="textarea"
      id="disabled-message"
      name="message"
      placeholder="Tell us what you think..."
      disabled=""
    ></textarea>
  </div>
</div>

Validation

Add aria-invalid="true" to show the textarea in an error state. Connect an error message using aria-describedby on the textarea, pointing to the id of the error element. This lets screen readers announce the error when the textarea is focused.

Bio

Bio must be at least 10 characters

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="bio">Bio</label>
    <textarea
      class="textarea"
      id="bio"
      name="bio"
      placeholder="Write a short bio..."
      aria-invalid="true"
      aria-describedby="bio-error"
    ></textarea>
    <p class="field-error" id="bio-error">
      Bio must be at least 10 characters
    </p>
  </div>
</div>

How it works

The textarea component is a CSS-only utility class applied to a native <textarea> element.

Structure

Use the .textarea class on a <textarea> element. Pair it with a .label element connected via for and id:

<label class="label" for="message">Message</label>
<textarea class="textarea" id="message" placeholder="Your message"></textarea>

Disabled state

Add disabled to the textarea:

<textarea class="textarea" disabled></textarea>

Validation

Add aria-invalid="true" to show the textarea in an error state:

<textarea class="textarea" aria-invalid="true"></textarea>

Class reference

Class	Description
`textarea`	Base textarea styles