Skip to primary navigation Skip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDA United State Department of Agriculture Farm Production and Conservation
FPAC Design System fsa-style@2.7.3
Get Started

Textarea

Overview

Free-form text entry any combination of letters, numbers, or symbols.

Preview

View Kitchen Sink

Its most common usage is as a nested component of the Form Fields component.

Variants

The style for <textarea> components always start with class="fsa-textarea", modifiable with one or multiple fsa-textarea--[VARIANT].

<textarea class="fsa-textarea fsa-textarea--[VARIANT]" name="Name" placeholder="Placeholder"></textarea>

Default

<textarea class="fsa-textarea" name="1324hgxi" placeholder="Placeholder"></textarea>

Small

<textarea class="fsa-textarea fsa-textarea--small" name="hj8h23gxi" placeholder="Placeholder"></textarea>

Large

<textarea class="fsa-textarea fsa-textarea--large" name="hj8h2hjkjxi" placeholder="Placeholder"></textarea>

Within a Field

Instructional message here 
<div class="fsa-field">
  <label class="fsa-field__label" for="UNIQUE-ID-88s8SUGg">Label <span class="fsa-field__label-desc">Required</span></label>
  <textarea class="fsa-textarea fsa-field__item" placeholder="Placeholder" id="UNIQUE-ID-88s8SUGg" aria-describedby="lorem-88s8SUGg-help-4" aria-required="true" name="UNIQUE-ID-88s8SUGg"></textarea>
  <span class="fsa-field__help" id="lorem-88s8SUGg-help-4">Instructional message here</span>
</div>

Custom height

.fsa-textarea has a default minimum height, modifiable via the rows attribute. Each row is approximately the line-height of its text. Overall default height may vary between browsers, though it is generally equivalent to rows="6".

<textarea class="fsa-textarea" name="Name" placeholder="Placeholder" rows="13"></textarea>

States

Response: Error

<textarea class="fsa-textarea fsa-textarea--error" name="hloremjkjxi" placeholder="Placeholder"></textarea>

Response: Positive

<textarea class="fsa-textarea fsa-textarea--positive" name="hloremipsxi" placeholder="Placeholder"></textarea>

Disabled

Disabled fields do not have a class="fsa-textarea--[VARIANT]", instead using the disabled attribute.

<textarea class="fsa-textarea" disabled="disabled" name="iephg" placeholder="Placeholder">Lorem ipsum dolor sit amet</textarea>

Readonly

Readonly fields do not have a class="fsa-textarea--[VARIANT]", instead using the readonly attribute.

<textarea class="fsa-textarea" readonly="readonly" name="ilozuphg" placeholder="Placeholder">Lorem ipsum dolor sit amet</textarea>

Responsive

Selectively override several style properties at each Media Query breakpoint.

fsa-textarea--[VARIANTS]@[BREAKPOINT], where VARIANTS is one or more of small, medium, or large, and BREAKPOINT is one or more of s, m, l, or xl

View on a larger screen or device to fully appreciate Responsive Web Design rendering.

Usage

Use

  • If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers.
  • When using another type of input will make answering more difficult.
  • When users want to be able to paste in a response, particularly longform text.
  • When a text input field may not satisfy the amount of text a user could enter; for example, long prose values that may amount to a sentence.

Don’t Use

  • When users need only enter short form content. Consider the textarea element.
  • When users are choosing from a specific set of options. Consider select, radio, or checkbox.
UI Component
Form Fields
Data entry from a variety of structured form controls.
UI Component
Timeline
List system and user activity chronologically.

Accessibility

Always refer to the Accessibility Forms Guide for overall guidance.

If you customize the textarea, ensure they continue to meet the the accessibility requirements that apply to all form controls.

General Guidance

  • The length of the text input provides a hint to users as to how much text to write. Do not require users to write paragraphs of text into a single-line input box; use a text area instead.
  • Only show error validation messages or stylings after a user has interacted with a particular field.
  • Avoid using placeholder text that appears within a text field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, users will no longer have that text available when they need to review their entries. (People who have cognitive or visual disabilities have additional problems with placeholder text.)
Return to top