Textarea

The textarea component provides a multiline text input control for collecting longer form responses from users. Use textareas when you need users to provide detailed information, comments, or descriptions that require more space than a single-line input field. The component includes proper validation states, accessibility features, and responsive behavior for optimal user experience across devices.

Do

  • Use for multiline content when users need to enter paragraphs, detailed descriptions, or lengthy responses.
  • Provide clear, descriptive labels that explain what type of content users should enter in the textarea.
  • Set appropriate dimensions using the rows attribute to indicate expected content length without overwhelming the form.
  • Include helpful description text to guide users on content requirements, character limits, or formatting expectations.
  • Use validation states to provide clear feedback when content doesn’t meet requirements or contains errors.
  • Ensure proper labeling with explicit labels that are programmatically associated with the textarea element.
  • Consider character limits and communicate them clearly to users when content length restrictions apply.
  • Test resize behavior to ensure textareas work well when users resize them on desktop browsers.

Don’t

  • Don’t use for short responses — single-line inputs are more appropriate for names, emails, or brief answers.
  • Don’t make textareas too small — insufficient space can frustrate users and lead to incomplete responses.
  • Don’t forget placeholder text when it would help users understand the expected content format or style.
  • Don’t ignore mobile experience — ensure textareas are appropriately sized for touch interaction and virtual keyboards.
  • Don’t use vague labels — be specific about what information you’re requesting from users.
  • Don’t skip validation feedback — users need clear indication when their input doesn’t meet requirements.
  • Don’t make required fields unclear — clearly indicate when textarea content is mandatory for form submission.
  • Don’t disable resize unnecessarily — allow users to adjust textarea size unless there’s a specific design constraint.

Message Input

Standard textarea for collecting user messages or detailed inquiries. Demonstrates proper form integration with labels, description text, and semantic markup. Use this pattern for contact forms, feedback collection, or any scenario where users need to provide detailed written responses.

Tell us the reason for your inquiry
Open example in a new tab

Accessibility Best Practices

Screen Reader Support

  • Explicit labeling: Uses proper <label> elements with for attributes to create programmatic relationships with textarea elements.
  • Descriptive labels: Labels clearly describe the purpose and expected content of the textarea field.
  • Description association: Helper text is properly associated with the textarea using aria-describedby when present.
  • Validation announcements: Error states are announced to screen readers using appropriate ARIA attributes and semantic markup.

Keyboard Navigation

  • Tab navigation: Textareas are included in the natural tab order and receive focus appropriately.
  • Text selection: Standard text selection and editing keyboard shortcuts work as expected within the textarea.
  • Form submission: Enter key behavior is appropriate for multiline input (creates new lines rather than submitting forms).
  • Resize controls: Keyboard users can access resize handles when available in supporting browsers.

Visual Accessibility

  • High contrast borders: Textarea borders and focus states meet WCAG AA contrast requirements against background colors.
  • Clear focus indicators: Visible focus states help keyboard users identify their current position in the form.
  • Error state visibility: Validation errors use multiple visual cues beyond color to indicate problems.
  • Readable text size: Text within textareas maintains appropriate size and line height for readability.

Content Guidelines

  • Clear instructions: Provide specific guidance about what information users should include in their response.
  • Length expectations: Indicate approximate length expectations through placeholder text or description.
  • Format requirements: Specify any formatting requirements or restrictions for the content.
  • Required field indication: Clearly mark required textareas and explain consequences of leaving them empty.

Implementation Considerations

  • Validation integration: Textareas work with Drupal’s form validation system to display error states and messages.
  • Character counting: Consider adding character count displays for textareas with length limits.
  • Auto-resize behavior: Evaluate whether textareas should automatically expand as users type more content.
  • Mobile optimization: Test textarea sizing and behavior on various mobile devices and screen orientations.

ARIA Attributes in Use

  • aria-describedby — Connects textarea to description text when additional context is provided.
  • aria-invalid="true" — Indicates validation errors to assistive technologies.
  • aria-required="true" — Identifies required fields for screen reader users.
  • role="textbox" — Explicitly identifies the element as a text input area (implicit for textarea elements).
Updated: Dec 02, 2025