Text Area Input

Guidelines React

The Text Area Input component is a multi-line form control that allows users to enter and edit longer blocks of text.

When to use

• Collect free-form, multi-line text input such as comments, descriptions, messages, or notes.
• When input may exceed a single line and users benefit from visible line breaks and resizing.
• In forms requiring detailed responses or formatted plain text.

Common Patterns

• With label and description: Position label above and optional helper text below.
• Character counter: Display remaining or used characters for length-limited fields.
• Auto-resize: Height expands dynamically based on content.
• Validation feedback: Error state with message for invalid or required input.

When NOT to use

• For single-line text; use Text Field instead.
• For rich text with formatting; use a dedicated rich text editor.
• When input is strictly limited to short values; prefer Text Field or Select.
• For code or pre-formatted text; consider specialized components.

Properties

Anatomy

Element	Description
Label	Text describing the purpose of the input.
Text Area	Resizable <textarea> field for multi-line entry.
Placeholder	Optional hint text shown when empty.
Description	Optional helper text below the field.
Error Message	Validation error text displayed in error state.
Character Counter	Optional display of current/max length.

States

State	Description	Visual Indicators
Default	Default interactive state	Neutral border and text
Hover	Cursor over object	Subtle border or background change
Focus	Keyboard focus (visible on Tab or arrow key navigation) or on click	High-contrast focus ring
Disabled	Non-interactive	Grayed out
Invalid	Validation error	Red border, error icon/message

Content Guidelines

• Use clear, concise labels (e.g., “Description”, “Comments”).
• Placeholder: Provide supplemental context example or guidance (e.g., “Enter your feedback here”).
• Error messages: Specific and actionable (e.g., “Please enter a description”).
• Character limits: Mention in description or counter if applicable.

Accessibility

• Use native <textarea> with aria-labelledby for label association.
• Support aria-required, aria-invalid, and aria-errormessage.
• Provide aria-describedby for description or counter.
• Ensure resizable handle is keyboard accessible if present.
• For dynamic character counters, announce changes using aria-live="polite" on the counter element.

Support standard keyboard navigation

• Tab: Focus the text area.
• Typing: Standard text entry with line breaks via Enter.
• Arrow keys: Navigate within text.
• Shift+Enter: Optional line break without submission (if in form).