Textarea

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

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.

Props

Name	Default	Description
`label`		Label text displayed above the textarea. `LocalizedMessage` from `formatMessage`.
`labelColor`		Color theme for the label. Options: `Base`, `Error`, `Success`.
`placeholder`		Placeholder text displayed when the textarea is empty. `LocalizedMessage \| DisplayValue`—copy from `formatMessage`, or data from `toDisplayValue`.
`helperText`		Helper text displayed below the textarea. `LocalizedMessage \| DisplayValue`.
`error`	`false`	Whether the textarea is in an error state.
`errorMessage`		Error message to display (replaces helper text when provided). `LocalizedMessage \| DisplayValue`.
`success`	`false`	Whether the textarea is in a success state.
`value`		Controlled value of the textarea.
`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` 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.

Default

With label

With value

Manual resize

Helper text and max length

Error state

Success state

Disabled

Read-only

Auto-resize

Custom rows

Textarea With Label

TextArea with Label

Add a label to identify the textarea field.

Labels are automatically associated with the textarea for accessibility.

TextArea with Helper Text

Provide additional context or instructions.

Helper text appears below the textarea and provides guidance to users.

Controlled TextArea

Control the textarea value with React state.

The textarea value is controlled by React state.

Uncontrolled TextArea

Pass an initial value without updating it from state; the textarea keeps its own text as the user types.

Use uncontrolled textareas when you don't need to control the value programmatically.

Auto-Resize TextArea

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.

Custom Row Limits

Configure auto-resize behavior with custom row limits.

Manual Resize

Allow users to manually resize the textarea vertically.

Users can drag the resize handle to adjust the textarea height.

Fixed Rows

Set a specific number of visible rows.

Use fixed rows when you need consistent height regardless of content.

Character Limit

Set maximum character count with visual counter.

A character counter displays as "current / max" (e.g., "45 / 100") below the textarea.

Error State

Display error state with error message.

Error state displays red border and replaces helper text with the error message.

Success State

Display success state for validated input.

Success state displays green border indicating successful validation.

Disabled State

Disable the textarea to prevent user input.

Disabled textareas appear grayed out and cannot receive focus or input.

Read-Only State

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.

Textarea Sizing Examples

TextArea Sizing Examples

Demonstrate different sizing options.

Small TextArea

Medium TextArea

Large TextArea

Real-World Example

Complete form example with multiple textareas.

Textarea / Usage

Accessibility / Required Field

On this page

Helper text and max length

Textarea

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Props

Name	Default	Description
`label`		Label text displayed above the textarea. `LocalizedMessage` from `formatMessage`.
`labelColor`		Color theme for the label. Options: `Base`, `Error`, `Success`.
`placeholder`		Placeholder text displayed when the textarea is empty. `LocalizedMessage \| DisplayValue`—copy from `formatMessage`, or data from `toDisplayValue`.
`helperText`		Helper text displayed below the textarea. `LocalizedMessage \| DisplayValue`.
`error`	`false`	Whether the textarea is in an error state.
`errorMessage`		Error message to display (replaces helper text when provided). `LocalizedMessage \| DisplayValue`.
`success`	`false`	Whether the textarea is in a success state.
`value`		Controlled value of the textarea.
`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` 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.

Default

With label

With value

Manual resize

Helper text and max length

Error state

Success state

Disabled

Read-only

Auto-resize

Custom rows

Textarea With Label

TextArea with Label

Add a label to identify the textarea field.

Labels are automatically associated with the textarea for accessibility.

TextArea with Helper Text

Provide additional context or instructions.

Helper text appears below the textarea and provides guidance to users.

Controlled TextArea

Control the textarea value with React state.

The textarea value is controlled by React state.

Uncontrolled TextArea

Pass an initial value without updating it from state; the textarea keeps its own text as the user types.

Use uncontrolled textareas when you don't need to control the value programmatically.

Auto-Resize TextArea

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.

Custom Row Limits

Configure auto-resize behavior with custom row limits.

Manual Resize

Allow users to manually resize the textarea vertically.

Users can drag the resize handle to adjust the textarea height.

Fixed Rows

Set a specific number of visible rows.

Use fixed rows when you need consistent height regardless of content.

Character Limit

Set maximum character count with visual counter.

A character counter displays as "current / max" (e.g., "45 / 100") below the textarea.

Error State

Display error state with error message.

Error state displays red border and replaces helper text with the error message.

Success State

Display success state for validated input.

Success state displays green border indicating successful validation.

Disabled State

Disable the textarea to prevent user input.

Disabled textareas appear grayed out and cannot receive focus or input.

Read-Only State

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.

Textarea Sizing Examples

TextArea Sizing Examples

Demonstrate different sizing options.

Small TextArea

Medium TextArea

Large TextArea

Real-World Example

Complete form example with multiple textareas.

Textarea / Usage

Accessibility / Required Field

On this page

Helper text and max length