Text Area

Multi-line text input with auto-resizing, accessible form integration, and validation states

Multi-line text input with auto-resizing and validation state styling.

Basic Usage

The simplest usage with default styling and auto-resizing based on content.

Combine with a label element for accessible form inputs.

Message

Include helper text to provide additional context or instructions.

Bio

Brief description for your profile. Maximum 500 characters.

Show a non-interactive state for disabled textareas.

Use the aria-invalid attribute to indicate validation errors.

Feedback

Feedback must be at least 10 characters long.

Display content that can be selected but not modified.

This content is read-only and cannot be edited.

Control the width and minimum height with utility classes.

Complete form with textarea, showing validation and submission flow.

Track and display character count for textarea inputs.

Share your thoughts in 280 characters or less

0 / 280

The Text Area component accepts all standard HTML textarea attributes, plus:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes merged with default styles
`disabled`	`boolean`	`false`	Disables the textarea
`readOnly`	`boolean`	`false`	Makes the textarea read-only
`placeholder`	`string`	-	Placeholder text when empty
`aria-invalid`	`"true" \| "false"`	-	Indicates validation state for accessibility
`rows`	`number`	-	Initial number of visible text lines
`maxLength`	`number`	-	Maximum number of characters allowed
`value`	`string`	-	Controlled value (requires onChange)
`defaultValue`	`string`	-	Initial value for uncontrolled usage

All standard textarea props are supported including onChange, onBlur, onFocus, name, id, etc.

On This Page