Textarea
freeMulti-line text input with auto-resize, character counter, and length validation.
Overview
The Textarea handles longer text input like messages, descriptions, and feedback. Supports auto-resize that grows with content, a character counter display, and the same built-in/regex validation as the Text Input.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "message" | Field name used in form data. |
label | String | "Message" | Label displayed above the textarea. |
placeholder | String | "Message" | Placeholder text. |
required | Boolean | false | Whether the field must be filled. |
rows | Number | 4 | Number of visible text rows. Hidden when auto-resize is on. |
autoResize | Boolean | false | Automatically grow/shrink height based on content. |
autoResizeMinHeight | Number | 100 | Minimum height in pixels when auto-resize is on. |
autoResizeMaxHeight | Number | -- | Maximum height before scroll appears. Hidden when auto-resize is off. |
showCharCount | Boolean | false | Show character count (e.g., "45/200") next to the label. |
Features
- Auto-resize that grows/shrinks with content
- Configurable min/max height for auto-resize
- Character counter display (count/maxLength)
- Built-in or regex pattern validation
- Vertical resize handle (when auto-resize is off)
Tips
Enable auto-resize for a polished UX — the textarea grows as users type.
The character counter only shows when using built-in validation with a maxLength set.
Set autoResizeMaxHeight to prevent the textarea from growing beyond a certain height.
Validation
This component uses text validation. See the Validation Guide for details on configuring rules and error messages.