Textarea

The textarea captures multi-line text like messages, comments, and feedback, and grows with its content as the user types. Pair it with a field for a label and description; for a single line, reach for the input.

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

Usage

Add the textarea class to a <textarea> element. It sizes itself to its content from a two-row minimum.

Class	Description
`textarea`	Add to a `<textarea>` element

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

Examples

Field

Wrap the textarea in a field with a label and description.

<div class="field">
  <label class="label" for="textarea-message">Message</label>
  <p class="field-description">Enter your message below.</p>
  <textarea
    class="textarea"
    id="textarea-message"
    placeholder="Type your message here."
  ></textarea>
</div>

Disabled

Add disabled and the textarea mutes itself and blocks interaction.

<div class="field">
  <label class="label" for="textarea-disabled">Message</label>
  <textarea
    class="textarea"
    id="textarea-disabled"
    placeholder="Type your message here."
    disabled
  ></textarea>
</div>

Invalid

Set aria-invalid on the textarea for the error state.

<div class="field">
  <label class="label" for="textarea-invalid">Message</label>
  <textarea
    class="textarea"
    id="textarea-invalid"
    placeholder="Type your message here."
    aria-invalid="true"
  ></textarea>
  <p class="field-description">Please enter a valid message.</p>
</div>

Button

Pair the textarea with a button to submit; without a visible label, give the textarea an aria-label.

<div class="grid gap-2">
  <textarea
    class="textarea"
    placeholder="Type your message here."
    aria-label="Message"
  ></textarea>
  <button class="btn">Send message</button>
</div>