Version 1.0.0

Text area

A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.

Anatomy#


Image illustrating through labels the component parts of a text area including the label, required marker, character count, validation marker, placeholder (or value), field.

Options#


Key example of a text area. Label, Interests. Sample placeholder text, Basket weaving.

Label#

A Text area should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. A text area without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).

Key example of two text areas, both labeled Interests. One example has the label above the text area, the second has the label to the left of the text area.

Label position#

Labels can be placed either on top or on the side of the field. Top labels are the default recommendation because they work better with longer copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited.

Key example of a text area. Label, Interests. Sample placeholder text, Basket weaving.

Placeholder#

The placeholder text, also commonly known as “ghost text,” is temporary and disappears once a user enters text.

Key example of a text area with value. Label, Interests. Example interests input into text area field, Snowboading, canoeing, calligraphy, gardening, knitting, child-rearing.

Value#

The value shows a user’s entered text.

Key example of a text area illustrating width. Label, Interests. Input text, Snowboarding, canoeing, calligraphy, gardening, knitting, child-rearing.

Width#

The width of a text area can be customized appropriately for its context.

Key example of two text areas, one in a not quiet style and the other in quiet style. Both labeled Interests. Both with input text examples Snowboarding, canoeing, calligraphy, gardening, knitting, child-rearing.

Quiet#

Text areas should rarely be presented in the quiet style. If the number height variant is turned off, then a text area can use the quiet style. The height of the field will grow with the height of the entered value.

Key example of 3 text areas, all labeled Interests, all with placeholder text Photography. Each shows a different way to communicate if the text area is a required field. The first has "(optional)" written to the right of the label text. The second has "(required)" written to the right of the label text. The third has an asterisk icon to the right of the label text, to denote that the text area is required.

Required or optional#

Text areas can be marked as optional or required, depending on the situation. For required text fields, there are two styling options: a “(required)” label or an asterisk. If you use an asterisk, be sure to include hint text to explain what the asterisk means. Optional text areas are either denoted with text added to the end of the label — “(optional)” — or have no indication at all.

The asterisk used in this component is an icon that has specific spacing from the label text — not part of the label text itself.

Key example of a text area, label Interests. Sample input text, Snowboarding, canoeing, calligraphy, gardening, knitting, child-rearing. Character count number 72, right-aligned in line with the label text above the text area.

Character count#

Text areas can display a character count indicator when the length of the text entry needs to be kept under a predefined value. Character count indicators can be used in conjunction with other indicators (e.g., validation icon, “optional” or “required” indicators) when necessary.

Key example of a text area with validation marker option, displaying a green check icon at the top right corner of the text area. Label Email addresses. Input text lisawilson@adobe.com.

Validation marker#

Text areas can display a validation marker when the text entry is expected to conform to a specific format (e.g., email address, credit card number, password creation requirements, etc.). The validation marker appears as soon as a user types a valid entry into the text area.

Key example of a text area labeled "Interests" with multiple examples of interests input into the text area, in an error state. The text area has a red border and a red alert icon in the top right corner.

Error#

A text area can be marked as having an error to show that a value needs to be entered in order to move forward or that a value that was entered is invalid.

Key example of a text area in a disabled state, unable to be interacted with. Label Interests. Sample input text, Snowboarding, canoeing, calligraphy, gardening, knitting, child-rearing.

Disabled#

A text area in a disabled state shows that the input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a text area may become available later.

Key example showing a read-only text area, with text that can only be selected but not changed or deleted. Label Email addresses. Sample input text lisawilson@adobe.com.

Read-only#

Text areas have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A text area does not have a read-only option if there is nothing entered in it.

Key example of a text area with the drag icon in the bottom right corner for changing the text area size. Label Interests. Placeholder text Photography.

Drag icon#

Text areas can either be a static size or can be resizable with a drag icon in the bottom right corner. The drag icon should be hidden if the fixed variant is turned off, or if the text area should not be resizable.

Key example of 2 text areas, both labeled Interests, both with various sample input text describing hobbies and interests. 2 options for height. One for a "number" option, field does not grow with input text. Second where "nothing" is entered for height, so field grows with input text.

Height#

If undefined, the height of a text area is dynamic and grows with the input text.

Table of options#

From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.

PropertyValuesDefault Value
label
text / nothing
label position
top / side
top
placeholder
text
value
text / nothing
width
number
is quiet
yes / no
no
necessity indicator
text / icon / nothing
icon
is required
yes / no
no
has character count
yes / no
no
show valid icon
yes / no
no
is error
yes / no
no
is disabled
yes / no
no
is read-only
yes / no
no
hide drag icon
yes / no
no
height
number / nothing
If undefined, height is dynamic and grows with input text.
number

Behaviors#


Key example of a text area at minimum width and minimum height. Label Interests. Sample placeholder text Photography.

Minimum size#

Text areas are ideal for long sentences or paragraphs, and should comfortably accommodate larger amounts of text. They should have a minimum height of 56 px on desktop and 70 px on mobile (when the height of the text area is a defined number). The minimum width is 112 px on desktop and 140 px on mobile.

Key example of two text areas. Both labeled Interests with a long list of various interests and hobbies as the sample input text. One is an active state text area with input text overflowing out of the top of the text area. The second is an inactive state text area with input text overflowing out of the bottom of the text area.

Overflow#

When typing into a text area and reaching the end of the field on a number-height text area, the cursor should remain as static in the bottom right corner (for left-to-right languages) while text above it overflows through the top of the field. When the field loses focus, text should overflow through the bottom of the text area, showing the beginning of the text.

Usage guidelines#


Include a label#

Every text area should have a label. A text area without a label is ambiguous and not accessible.

Key example of a text area correctly using a label above the text area. Label Members. Input text Lisa.
Key example of incorrect usage of a text area. Text area missing a label. Input text Lisa.

Follow capitalization rules#

Text area labels and placeholder text should be written in sentence case.

Key example of a text area correctly using sentence case styling for the label and placeholder text. Label Email address. Placeholder text user@adobe.com.
Key example of an incorrect text styling on a text area. Title case for the label and placeholder text. Label Enter Email Address. Placeholder text Type Email.

Mark the minority of text areas in a form as required or optional#

In a single form, mark only the required fields or only the optional fields, depending on whichever is less frequent in the entire form. If most of the text fields are optional, only the required fields should be give an asterisk or have labels appended with “(required)”. If most of the text fields are required, only the optional fields should be appended with “(optional)”. An asterisk should never be used to note that a text area is optional.

Key example of a group of text areas correctly marking the minority of text areas as optional. 3 text areas, labels First name, Last name, Interests. Interests is marked as optional.
Key example of a group of text areas incorrectly marking the majority of text areas as required. 3 text areas, labels First name, Last name, Interests. First name and Last name fields are marked as required.

Don't use quiet style for fixed-height text areas#

Because text areas are typically taller and wider than other components, it’s important to include the background of the field in order to help a user know where to click or tap to start entering text. If a text area is using the quiet style, the field underline may be too far away from the text to be recognized as part of the component. Only use the quiet style when the height option is not a fixed number.

Key example of a text area incorrectly using the quiet style with a fixed number-height.

Internationalization#


Key example of 3 text areas, including character count, validation icon, and error options, in right-to-left languages.

RTL#

For RTL (right-to-left) languages, the layout of a text area is mirrored. The label is right-aligned and various decorations (e.g., character count, validation icon, error icon) are left-aligned. Make sure to consider that some types of content (e.g., email addresses) are not translated.

Keyboard interactions#


KEYINTERACTION
TabTabbing into a text area selects the existing text.

Changelog#


DateNumberNotes
Jul 21, 20201.0.1
  • Updated border color to be more accessible
Mar 09, 20201.0.0
  • This component has been added to the website

Design checklist#


All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.