Overview

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.

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.

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