Text Area

Anatomy

import {TextArea} from '@staffbase/design';

<TextArea />

Examples

Invalid

API reference

TextArea

Renders a multi-line text input. Combine with Field to provide accessible labels, descriptions, and errors.

Supports all Base UI Input props and native textarea attributes. The table below highlights commonly used props.

When to use

• Use TextArea for multi-line text input such as comments, descriptions, messages, or free-form notes.
• Use TextArea when the user’s input may span multiple sentences or lines.
• Use TextArea when the expected input length is unpredictable and likely exceeds a single line.

When not to use

• Don’t use TextArea for single-line input such as names, email addresses, or search queries — use TextField instead.
• Don’t use TextArea for structured or constrained input such as dates or selections — use a date picker or Select instead.

How to use

Structure

• Always wrap TextArea in Field.Root to get accessible label, description, and error message support.
• Use Field.Label to provide a visible, accessible label — never rely on placeholder as the only label.
• Use Field.Description to add helper text that clarifies the expected input format or constraints.
• Set the rows prop to control the initial visible height; choose a value that reflects the expected length of the user’s input.

Validation

• Use invalid on Field.Root to communicate a validation error state.
• Show a specific, actionable error message in Field.Error, such as “This field is required.” or “Exceeds the character limit. Enter a shorter description.”

Accessibility

• Don’t use placeholder as a substitute for Field.Label — placeholder text disappears when the user starts typing and is not reliably announced by screen readers.
• Use Field.Root to programmatically link the label, description, and error message to the text area via ARIA attributes.

Content & UX copy

• Keep the label to 1 line (maximum 40 characters). Use Title Case. Don’t use ending punctuation or colons (:).
• Keep placeholder text to 1 line and 1 sentence. Use sentence case. End with a space and ellipsis ( …).
• Keep helper text (Field.Description) to a maximum of 3 lines. Use sentence case with a full stop (.) at the end. Don’t use exclamation points (!).
• Write error messages that identify the problem and suggest a fix — for example “Exceeds the character limit. Enter a shorter description.”