Loading navigation…
User
API and Development
TextArea provides a multi-line text input component with comprehensive form features including labels, helper text, error and success states, character counting, and automatic resizing. Built on Radix UI's TextArea component, it ensures consistent textarea patterns across the interface with full accessibility support, validation feedback, and flexible sizing options for various content lengths.
| Name | Default | Description |
|---|---|---|
label | Label text displayed above the textarea. | |
labelColor | Color theme for the label. Options: Base, Error, Success. | |
placeholder | Placeholder text displayed when the textarea is empty. | |
helperText | Helper text displayed below the textarea. | |
error | false | Whether the textarea is in an error state. |
errorMessage | Error message to display (replaces helper text when provided). | |
success | false | Whether the textarea is in a success state. |
value | Controlled value of the textarea. | |
defaultValue | Default value for uncontrolled usage. | |
onChange | Callback fired when the textarea value changes: (event: React.ChangeEvent<HTMLTextAreaElement>) => void. | |
disabled | false | Whether the textarea is disabled. |
readOnly | false | Whether the textarea is read-only. |
required | false | Whether the textarea is required for form submission. |
resizeMode | None | Resize behavior: None, Auto (grow with content), or Vertical (drag handle). Import { ResizeMode } from @prepared911/ui-core and pass e.g. resizeMode={ResizeMode.Auto}. |
minRows | 3 | Minimum number of rows to display (only applies when resizeMode is Auto). |
maxRows | 10 | Maximum number of rows to display (only applies when resizeMode is Auto). |
rows | 3 | Number of visible text lines (ignored when resizeMode is Auto). |
maxLength | Maximum number of characters allowed. Displays character counter when provided. | |
minLength | Minimum number of characters required. | |
id | Unique identifier for the textarea field. | |
name | Name attribute for form submission. | |
autoFocus | false | Whether to automatically focus the textarea on mount. |
containerClassName | Custom class name for the container element. | |
className | Custom class name for the textarea field. |
Add a label to identify the textarea field.
Labels are automatically associated with the textarea for accessibility.
Provide additional context or instructions.
Helper text appears below the textarea and provides guidance to users.
Control the textarea value with React state.
The textarea value is controlled by React state.
Use defaultValue for uncontrolled usage.
Use uncontrolled textareas when you don't need to control the value programmatically.
Automatically resize the textarea based on content.
The textarea grows as content is added, up to maxRows, and shrinks when content is removed, down to minRows.
Configure auto-resize behavior with custom row limits.
Allow users to manually resize the textarea vertically.
Users can drag the resize handle to adjust the textarea height.
Set a specific number of visible rows.
Use fixed rows when you need consistent height regardless of content.
Set maximum character count with visual counter.
A character counter displays as "current / max" (e.g., "45 / 100") below the textarea.
Display error state with error message.
Error state displays red border and replaces helper text with the error message.
Display success state for validated input.
Success state displays green border indicating successful validation.
Disable the textarea to prevent user input.
Disabled textareas appear grayed out and cannot receive focus or input.
Make the textarea read-only to display non-editable content.
Read-only textareas display content but prevent editing, useful for displaying system-generated or protected content.
Demonstrate different sizing options.
Complete form example with multiple textareas.