bellhop by actabl

Components

search
Accordion
App Bar
Avatar
Avatar Stacked
Badge
Badge Dot
Breadcrumbs
Button
Button Icon
Card
Checkbox
Checkbox Group
Container
Data Grid
Date Picker
Date Range Picker
Dropdown
Empty State
Illustrations
Input Autocomplete
Input Number
Input Password
Input Text
Input Verification
Loader Spinner
Logo Box
Modal
Notification
Page Navigation
Pagination
Popover
Product Switcher
Property Switcher
Radio Button
Sidebar
Skeleton Loader
Tabs
Tag
Textarea
Toggle
Tooltip

Textarea

Multi-line text input component with label, hint text, resize options, and validation states. Perfect for collecting longer-form text input from users.

When to use

Use textareas when users need to enter multiple lines of text, such as comments, descriptions, or feedback.

Long-Form Input

Collect messages, comments, descriptions, or any text that spans multiple lines.

Feedback Collection

Gather detailed feedback, reviews, or testimonials from users.

Notes and Documentation

Allow users to add notes, documentation, or additional information.

When not to use

  • For single-line input—use input-text instead
  • For rich text formatting—use a rich text editor component
  • When input should be constrained to specific formats—use specialized inputs
  • For very short responses (1-2 words)—use a regular text input

Anatomy

Textareas consist of several key parts that work together to create an effective input control.

  1. Label

    Describes what content should be entered in the textarea

  2. Help Icon (Optional)

    Provides additional context or information via tooltip

  3. Text Area Field

    The multi-line input field where users enter text

  4. Hint Text (Optional)

    Helper text that appears below the field to provide guidance or validation feedback

States

Textareas support multiple states to provide clear feedback to users.

Variants

Textareas can be configured with different options to suit various use cases.

With Placeholder

Placeholder text provides input guidance.

Required Field

Asterisk indicator for required fields.

With Hint Text

Helper text provides additional guidance.

Error State

Shows validation errors with message.

Best Practices

Follow these guidelines when using textareas.

Do

  • Set an appropriate number of rows to indicate expected content length
  • Use clear, descriptive labels
  • Provide helpful hint text when formatting or length requirements exist
  • Show character count when there's a maximum length
  • Allow vertical resize for longer content

Don't

  • Don't use textarea for single-line input (use input-text instead)
  • Don't make the initial height too small or too large
  • Don't disable resize unless there's a specific reason
  • Don't use vague placeholder text like "Enter text here"

Accessibility

Textareas are designed to be accessible to all users.

Keyboard Navigation

  • Tab - Move focus to the textarea
  • Shift + Tab - Move focus to previous element
  • Enter - Create new line within textarea
  • Arrow Keys - Navigate within text

Screen Reader

  • Label is properly associated with the input
  • Required state is announced
  • Error state is announced
  • Hint text is accessible
  • Placeholder text is announced

Visual Design

  • Visible focus indicator
  • Sufficient color contrast for text
  • Clear error state visual indication
  • Resizable for user preference

Resources

Design and development resources for the Textarea component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →