Skip to main content
Rivet Design System Indiana University

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 #


Open in new window
Copy link to 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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 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"/></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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M12 7H4v2h8V7Z"/>  <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"/></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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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 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"/></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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M9 7v5H7V7h2ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/>  <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"/></svg>
  </span>
  <span class="rvt-inline-alert__message" id="info-message">Add a Message to give users more information.</span>
</div>

Elements #

Element Description Usage Required Multiple
Label Label associated with the textarea Keep label text brief

Label is required

Component may contain only one Label

Usage #

Do

  • Use to collect information that would take up multiple lines, such as an address, issue description, or short essay

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.