Text Areas are versatile input fields designed for capturing longer, multi-line text from users, such as comments, messages, or any extensive user input. They are commonly used for things like subject lines, pre-headers, or message content.
Design
Structure
A Text Area component is defined by the following elements:
Container: The outer boundary that defines the Text Area's size and shape, typically rectangular with slightly rounded corners.
Input Field: The editable area where users can type their text. It should expand vertically to accommodate multiple lines of text.
Placeholder Text: Optional, non-editable text displayed in the Text Area before the user begins typing, offering guidance or examples of the expected input.
Scroll Bar: Visible when the text exceeds the vertical limit of the Text Area, allowing users to scroll through their input.
Toolbar (optional): the toolbar is a unique addition to Iterable Text Fields and Text Areas that allow the user to leverage different Iterable tools like Copy Assist, Dynamic Content Builder, or Snippets—directly from the input.
Size
The Text Area should automatically grow as the marketer adds text to the input, with a max-height of 400px, at which a scrollbar will appear. The base height of the Text Area is 80px, to distinguish it from a Text Field.
Orientation
Depending on the shape of the parent form that the Text area is included in, the input can be either vertical (default) or horizontal.
States
Default (inactive): The normal state when the Text Area is not actively being interacted with.
Hover: When a user's pointer is over the Text Area, indicating it's interactive.
Active/Focused: The state when the Text Area is clicked on and ready for text input.
Disabled: Indicating that the Text Area is not available for input at the moment.
Error: Highlighted to indicate a validation error or incorrect input.
Default (inactive)
Hover
Focused
Error
Disabled
Guidelines
Use cases
Collecting user feedback, comments, or descriptions.
Filling out forms that require detailed information or explanations.
Any application where multi-line text input is necessary.
Do
Use placeholder text to offer examples or guidance on what marketers should enter, but ensure it disappears when the marketer begins typing.
Don't
Don't use Text Areas for single-line inputs; use Text Fields instead.
Avoid making the Text Area too small, which could frustrate users who need to enter more text.
Content
Placeholder text should be concise, informative, and directly related to the expected input.
For Text Areas with a character limit, ensure the character counter is discreet yet easily noticeable. See Character limits for more details.
Accessibility
Keyboard Navigation: Ensure Text Areas can be focused using keyboard navigation, such as the Tab key, and that marketers can interact with them using standard keyboard inputs.
Screen Reader Support: Use appropriate label tags and ARIA attributes to ensure screen readers can accurately convey the Text Area's purpose and instructions.
Contrast and Legibility: Adhere to WCAG guidelines for text contrast, ensuring that text within the Text Area is easily legible against its background.
Error Identification: Provide clear, accessible feedback for errors, such as misinputs or exceeding character limits, including text instructions for correction.
Health
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova