Input - Text area

Input fields designed for capturing longer, multi-line text

Known issues
Show details
Known issues
Published: February 21, 2024
Updated: February 21, 2024

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.
Default (inactive)

Default (inactive)

Hover

Hover

Focused

Focused

Error

Error

Disabled

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.
  • Use placeholder text to offer examples or guidance on what marketers should enter, but ensure it disappears when the marketer begins typing.
  • 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

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Known issues