Github

Textarea

Textareas capture multi-line user input such as comments, notes, or descriptions.

Component variations

Basic Textarea

Standard textarea for multi-line input

States

Contains: Default, Success, Error, Warning

Input is valid
Input has an error
Input has a warning

Optional & Disabled

Textarea can be marked as optional or disabled

Optional

Character Limit

Textarea can have a maximum character count with counter

0/250

Hint & Helper Text

Use hint for tooltips and helper text for guidance

Maximum 500 characters for optimal display

With Icons

Textarea with leading icon

Trailing Action

Textarea with trailing action icon for buttons like send or submit

Usage Guidelines

Import

Import the textarea component in your module or component:

import-textarea.ts

Copy code

Basic Implementation

Here is a basic example of using the textarea component:

textarea-example.ts

Copy code

Implementation with all available APIs

Here is an example of using the textarea component with all available APIs:

textarea-example.html

Copy code

Listening to Events

Handle input changes by listening to the (valueChange) and (valueCommit) events:

textarea-events.html

Copy code

textarea-events.ts

Copy code

Using Character Limits

Control maximum character input and display a counter:

textarea-character-limit.html

Copy code

Using Trailing Action

Add a trailing action icon for buttons like send, submit, or attachment:

textarea-trailing-action.html

Copy code

textarea-trailing-action.ts

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
No
Label text displayed above the textarea
placeholder
string
''
No
Placeholder text shown when textarea is empty
value
string
''
No
Current value of the textarea
optional
boolean
false
No
Whether the textarea is optional
disabled
boolean
false
No
Whether the textarea is disabled
state
'success' | 'error' | 'warning' | null
null
No
Visual state of the textarea
helperText
string
-
No
Helper text displayed below the textarea
hintText
string
-
No
Hint text shown in tooltip
leadingIcon
string
-
No
Icon displayed before the textarea value
trailingActionIcon
string
-
No
Icon button displayed after the textarea value

Outputs

Event
Type
Description
valueChange
EventEmitter<string>
Emitted on every textarea input change
valueCommit
EventEmitter<string>
Emitted when the textarea loses focus
trailingActionClick
EventEmitter<void>
Emitted when the trailing action icon is clicked
inputFocus
EventEmitter<void>
Emitted when the textarea receives focus

Best Practices

When to Use

  • Use Textarea when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Textarea when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use textareas for multi-line input like comments, descriptions, or feedback
  • Provide clear labels that describe the expected content
  • Use placeholder text to give users hints about format or content
  • Set appropriate maxInputCount for character-constrained fields
  • Use helper text to guide users on expected content length or format
  • Show validation feedback with state prop and helper text
  • Consider default height that accommodates typical input
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the textarea features in this section

Helper text

example.html

Copy code