Textarea

Allow users to enter multi-line text content to be submitted as part of a form

Overview #

Use the textarea component to allow the user to enter multi-line text content to be submitted as part of a form.

Examples #

Choose an example

<label for="textarea-default" class="rvt-label">Textarea</label>
<textarea id="textarea-default" class="rvt-textarea"></textarea>

Open in new window Copy link to example

<label for="textarea-default" class="rvt-label">Textarea <span class="rvt-color-orange-500 rvt-text-bold">*</span></label>
<textarea id="textarea-default" class="rvt-textarea" required></textarea>

Open in new window Copy link to example

<!-- Success -->
<label for="textarea-success" class="rvt-label">Textarea</label>
<textarea id="textarea-success" class="rvt-textarea rvt-validation-success"></textarea>
<div class="rvt-inline-alert rvt-inline-alert--success">
  <span class="rvt-inline-alert__icon">
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M7 11.414 11.914 6.5 10.5 5.086 7 8.586l-1.5-1.5L4.086 8.5 7 11.414Z"></path><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path></svg>
  </span>
  <span class="rvt-inline-alert__message" id="essay-message">Your Essay is valid!</span>
</div>

<!-- Warning -->
<label for="textarea-warning" class="rvt-label [ rvt-m-top-md ]">Textarea</label>
<textarea id="textarea-warning" class="rvt-textarea rvt-validation-warning"></textarea>
<div class="rvt-inline-alert rvt-inline-alert--warning">
  <span class="rvt-inline-alert__icon">
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M12 7H4v2h8V7Z"></path><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path></svg>
  </span>
  <span class="rvt-inline-alert__message" id="misspelling-message">Your Response has some misspellings!</span>
</div>

<!-- Danger -->
<label for="textarea-danger" class="rvt-label [ rvt-m-top-md ]">Textarea</label>
<textarea id="textarea-danger" class="rvt-textarea rvt-validation-danger"></textarea>
<div class="rvt-inline-alert rvt-inline-alert--danger">
  <span class="rvt-inline-alert__icon">
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"></path><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path></svg>
  </span>
  <span class="rvt-inline-alert__message" id="special-chars-message">Your Description has special characters that need to be replaced.</span>
</div>

<!-- Info -->
<label for="textarea-info" class="rvt-label [ rvt-m-top-md ]">Textarea</label>
<textarea id="textarea-info" class="rvt-textarea rvt-validation-info"></textarea>
<div class="rvt-inline-alert rvt-inline-alert--info">
  <span class="rvt-inline-alert__icon">
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M9 7v5H7V7h2ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"></path><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z"></path></svg>
  </span>
  <span class="rvt-inline-alert__message" id="info-message">Add a Message to give users more information.</span>
</div>

Usage #

Do

Use to collect information that would take up multiple lines, such as an address, issue description, or short essay
Keep label text brief, but not terse—"Describe the problem you're having" is clearer and kinder than "Problem description"

Don't

Use to collect information that will only take up one line, such as a name, phone number, or city—use a text input instead
Ask users to paste very long content into a textarea—ask them to use a file input to upload a document instead

Accessibility #

Every textarea requires a label. A placeholder attribute is not a substitute for a label. If you need to visually hide a label in an accessible way, use the .rvt-sr-only utility class.
Don’t label textareas implicitly. Avoid wrapping a textarea with its associated label element instead of using an explicit for attribute on that label.
Include a note about required fields. If you use required textareas in a form, add a note to the start of the form or field set explaining that required fields are marked with an asterisk (*). The create or edit resource page layout includes an example of this note.