Text area usage guidelines

Text areas allow users to add in their own multi-line free-form values in forms.

When to use

• When the expected input is more than a few words or spans multiple lines.
• For collecting user-generated content such as comments, feedback, or descriptions.
• When users need to provide detailed responses, such as in forms, reviews, or reports.
• When line breaks or paragraphs are required.

When not to use

• For shorter and single-line user input, use text field instead.
• For structured data such as numbers or dates, use content-specific components like number field or date picker.
• When input masking is required, use text field instead.
• Checkboxes, radio buttons, and single select should be used for data with pre-defined options or for data where user mistakes may cause critical issues.

Usage

Preview

Issue description

Code

import { TextArea } from '@cimpress-ui/react';

export default function Demo() {
  return <TextArea label="Issue description" placeholder="Provide a description for your issue" rows={5} />;
}

Formatting and layout

Placement

Text areas can either be left-aligned with the container they are placed in or, for smaller containers like modal dialogs and disclosures, they can span the full width of the container. Take extra care to ensure the height of the text area is big enough to accommodate the expected input. If only a short input is expected, consider using a text field instead to optimize space and maintain a clean layout.

Spacing

• Text areas should have at least 16px of horizontal and vertical spacing between them and other elements.

Form alignment

Text areas can be used in forms in conjunction with the other form components (single select, check box, and radio button for example). Form element width should be determined by the width of the container, not the specific content in the individual element. When text areas are stacked vertically with other elements (other text areas, or other form components), all of the components should have consistent widths.

Do

Subject

Message

Don't

Subject

Message

Content writing

Label

• Do use a short description of just one or two words for the label such as “Feedback”.
• Do not format labels in the form of a question such as “Would you like to provide any additional feedback?”
• Do not include verbs in your label such as “Enter your feedback”.

Placeholder text

• Placeholder text can be used to provide an example of user input but should not duplicate the label text. Placeholder text can be especially useful in text areas to help users understand the expected format for input values.
• Placeholder text is optional and should only be used where more context is necessary for the user to understand.

Description text

• Do provide description text whenever the label might not be enough context for a user to understand the purpose of the text area.
• Do not provide unnecessary description text when the purpose of the text area is obvious.
• Do write clear and concise description text. Text should be limited to one sentence.
• End the description text with a period or equivalent punctuation mark. This helps screen reader users understand where the description ends, and it improves readability for all users.

Error text

• Do provide clear and concise error messaging.
• Do explain the issue and let the user know what they need to do to resolve it. Error messages should always provide users with a solution or a path to resolving the error.
• Error messages should use language that is easily understood rather than complex technical terms.
• End the error message with a period or equivalent punctuation mark. This helps screen reader users understand where the error message ends, and it improves readability for all users.