The Textarea component provides a flexible multi-line text input field with support for labels, validation, auto-resize, and character counting.
Basic usage
<flx-textarea
label="Description"
placeholder="Enter a description..."
[(ngModel)]="description">
</flx-textarea>
Properties
Label text displayed above the textarea
Placeholder text shown when textarea is empty
The current value of the textarea
Number of visible text lines
Makes the textarea read-only
Marks the field as required
error
boolean | string
default:"false"
Shows error state. Pass a string to display error message
Helper text displayed below the textarea
Maximum number of characters allowed
Shows character count indicator
Automatically adjusts height based on content
Minimum height when autoResize is enabled (e.g., ‘100px’)
Maximum height when autoResize is enabled (e.g., ‘300px’)
Events
Emitted when the textarea value changes
Emitted when the textarea loses focus
Emitted when the textarea receives focus
Examples
With character count
Auto-resize
With validation
Reactive forms
<flx-textarea
label="Bio"
placeholder="Tell us about yourself..."
[maxLength]="500"
[showCharCount]="true"
[(ngModel)]="bio">
</flx-textarea>
<flx-textarea
label="Comments"
placeholder="Enter your comments..."
[autoResize]="true"
minHeight="60px"
maxHeight="200px"
[(ngModel)]="comments">
</flx-textarea>
Auto-resize automatically adjusts the textarea height as you type, making it grow with content up to the maxHeight.
<flx-textarea
label="Feedback"
[required]="true"
[error]="feedbackError"
helperText="Please provide at least 20 characters"
[maxLength]="1000"
[showCharCount]="true"
[(ngModel)]="feedback"
(blur)="validateFeedback()">
</flx-textarea>
export class FeedbackComponent {
feedback = '';
feedbackError = false;
validateFeedback() {
this.feedbackError = this.feedback.length < 20;
}
}
<form [formGroup]="feedbackForm">
<flx-textarea
label="Message"
formControlName="message"
[error]="messageControl.invalid && messageControl.touched"
[maxLength]="2000"
[showCharCount]="true"
[autoResize]="true"
helperText="Describe your issue in detail">
</flx-textarea>
</form>
import { FormBuilder, Validators } from '@angular/forms';
export class FeedbackFormComponent {
feedbackForm = this.fb.group({
message: ['', [Validators.required, Validators.minLength(20)]]
});
get messageControl() { return this.feedbackForm.get('message')!; }
constructor(private fb: FormBuilder) {}
}
Styling
Customize the Textarea component using CSS custom properties:
flx-textarea {
--flx-textarea-min-height: 80px;
--flx-textarea-padding: 8px 12px;
--flx-textarea-border-radius: 4px;
--flx-textarea-border-color: #d1d5db;
--flx-textarea-focus-border-color: #3b82f6;
--flx-textarea-error-border-color: #ef4444;
--flx-textarea-background: #ffffff;
--flx-textarea-text-color: #111827;
--flx-textarea-placeholder-color: #9ca3af;
}
Accessibility
The Textarea component automatically handles:
- Proper label association with
for and id attributes
aria-required for required fieldsaria-invalid for fields with errorsaria-describedby for helper text and error messages- Character count announcements for screen readers
Best practices
- Use
autoResize for better user experience with variable content lengths
- Always set
maxLength to prevent excessive input
- Enable
showCharCount when using maxLength to provide visual feedback
- Provide clear helper text explaining the expected input format
- Use appropriate
rows value based on expected content length
- Consider
minHeight and maxHeight to prevent layout shifts
For long-form content entry, enable both autoResize and showCharCount to help users track their progress against any character limits.
- Input - Single-line text input
- Select - Dropdown selection