Skip to main content

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 #


<label for="textarea-default" class="rvt-label">Textarea</label>
<textarea id="textarea-default" class="rvt-textarea"></textarea>
<!-- 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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M10.2,5.4,7.1,9.53,5.67,8.25a1,1,0,1,0-1.34,1.5l2.05,1.82a1.29,1.29,0,0,0,.83.32h.12a1.23,1.23,0,0,0,.88-.49L11.8,6.6a1,1,0,1,0-1.6-1.2Z" />
<path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" id="first-name-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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M11,9H5A1,1,0,0,1,5,7h6a1,1,0,0,1,0,2Z" />
<path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z" />
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" id="first-name-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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
<path d="M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z" />
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" id="first-name-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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="currentColor">
<path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z" />
<path d="M8,12a1,1,0,0,1-1-1V8A1,1,0,0,1,9,8v3A1,1,0,0,1,8,12Z" />
<circle cx="8" cy="5" r="1" />
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" id="first-name-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.