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
Anatomy#
Options#
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”).
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.
Value#
The value shows a user’s entered text.
Width#
The width of a text area can be customized appropriately for its context.
Size#
Text areas come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
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.
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.
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.
Validation icon#
Text areas can display a validation icon when the text entry is expected to conform to a specific format (e.g., email address, credit card number, password creation requirements, etc.). The icon appears as soon as a user types a valid entry into the text area.
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.
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.
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.
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.
Height#
If undefined, the height of a text area is dynamic and grows with the input text.
Help text (description and error message)#
A text area can have
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.
Behaviors#
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.
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.
Help text overflow#
When the help text is too long for the available horizontal space, it wraps to form another line.
Windows high contrast mode#
In Windows high contrast mode, text area should be displayed using the high contrast theme-specified colors for buttons. By default, border colors should be the same as the button text color and labels should use default text color. In hover and keyboard focus states, the border color should display as the button border color. In the disabled state, border and text color should display as the disabled color.
Usage guidelines#
Include a label#
Every text area should have a label. A text area without a label is ambiguous and not accessible.
Follow capitalization rules#
Text area labels and placeholder text should be written in sentence case.
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.
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.
Use help text to show hints, formatting, and requirements#
The description in the help text is flexible and encompasses a range of guidance. Sometimes this guidance is about what to input, and sometime it’s about how to input. This includes information such as:
- An overall description of the input field
- Hints for what kind of information needs to be input
- Specific formatting examples or requirements
The help text’s message should not simply restate the same information in the label in order to prompt someone to interact with it. Don’t add help text if it isn’t actually relevant or meaningful to a user in order to try to maintain layout continuity with other inputs that require help text.
Don’t use placeholder text#
Putting instructions for how to complete an input, requirements, or any other essential information into placeholder text is not accessible. Once a value is entered, placeholder text is no longer viewable; if someone is using an automatic form filler, they will never get the information in the placeholder text.
Instead of placeholder text, use the help text description to convey requirements or to show any formatting examples that would help user comprehension. If there's placeholder text and help text at the same time, it becomes redundant and distracting, especially if they're communicating the same thing.
Switch help text with error text#
The help text area also displays an error message. When a text area already includes help text and an error is triggered, the help text is replaced with error text. Once the error is resolved, the help text description reappears below the field.
Since one gets replaced by the other, the language of the help text and error text need to work together to convey the same messaging. Help text explains the requirement or adds supplementary context for how to successfully complete the input. Error text tells a user how to fix the error by re-stating the input requirements or describing the necessary interaction. Make sure that the help text and the error text include the same essential information so that it isn’t lost if one replaces the other (e.g., minimum requirements).
Write error text that shows a solution#
Write error messaging in a human-centered way by guiding a user and showing them a solution — don’t simply state what’s wrong and then leave them guessing as to how to resolve it. Ambiguous error messages can be frustrating and even shame-inducing for users. Also, keep in mind that something that a system may deem an error may not actually be perceived as an error to a user.
Error text should be written in 1-2 short, complete sentences and in a clear and straightforward way. End sentences with a period, and never with an exclamation point. For text areas, the nature of the error is often related to something that needs to be fixed for in-line validation, so a
Internationalization#
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#
Changelog#
- Updated read-only option design
- Updated all colors to 6.0.0
- Removed placeholder text option
- Updated read-only option design
- Added size option
- Updated border color to be more accessible
- 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).
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).
Accessible use of color
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
Accessible contrast for text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible contrast for UI components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Content design
UI language and information design considerations have been incorporated into component design.
Defined options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Defined behaviors
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
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 available as design tokens.
UI kit
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
Generated UI kit
Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.
In Spectrum for Adobe XD plugin
Component is included in the Spectrum for Adobe XD plugin.