Textarea

A textarea component for multi-line text input. Supports multiple sizes and all standard textarea attributes. Perfect for comments, descriptions, and longer form inputs.

Installation

Import

Usage

Use Textarea for multi-line text input in forms. Choose appropriate row count based on expected content length. Use maxLength for character limits. Provide clear placeholder text. Use disabled state for unavailable fields and readonly for display-only values. For form integration with validation and error handling, use TextareaField which extends Textarea and integrates with Conform forms.

Design Guidelines

Maintain consistent textarea sizing throughout your application. Use appropriate row counts for expected content. Provide character count feedback when using maxLength. Group related form fields visually. Use consistent spacing and styling.

Basic Usage

Simple textarea with placeholder

Contact Form

Contact form with message textarea demonstrating basic form integration

Textarea Sizes

Demonstrating different textarea sizes in a form

Different Row Counts

Demonstrating textareas with different row counts for various use cases

Textarea States

Demonstrating disabled, readonly, and required states in a form

Character Limit with Counter

Textarea with maxLength and character counter using rightInlay

Complete Feedback Form

Comprehensive feedback form showcasing all TextareaField features: sizes, rows, states, maxLength, topText, and validation

TextareaField

TextareaField extends Textarea with form integration, labels, error handling, and validation support. Use TextareaField when building forms with Conform. packages.composedComponents.extends Textarea. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`field`	`FieldMetadata`	—	Conform field metadata for form integration and validation
`label`	`string \| React.ReactNode`	—	Label text displayed above the textarea
`topText`	`string \| React.ReactNode`	—	Helper text displayed above the label
`rightInlay`	`React.ReactNode`	—	Content displayed in the bottom-right corner (e.g., character count)
`labelProps`	`React.LabelHTMLAttributes<HTMLLabelElement>`	—	Additional props for the label element
`inputClass`	`string`	—	Additional CSS classes for the textarea element
`inputRef`	`React.Ref<HTMLTextAreaElement>`	—	Ref forwarded to the textarea element
`className`	`string`	—	packages.commonProps.className.description

packages.sections.api

Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`inputSize`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Size of the textarea
`rows`	`number`	`3`	Number of visible text lines
`cols`	`number`	—	Number of visible text columns (width)
`placeholder`	`string`	—	Placeholder text displayed when textarea is empty
`value`	`string`	—	Controlled textarea value
`defaultValue`	`string`	—	Uncontrolled textarea default value
`disabled`	`boolean`	`false`	Whether the textarea is disabled
`readOnly`	`boolean`	`false`	Whether the textarea is read-only
`required`	`boolean`	`false`	Whether the textarea is required
`maxLength`	`number`	—	Maximum number of characters allowed
`onChange`	`(event: React.ChangeEvent<HTMLTextAreaElement>) => void`	—	Callback fired when the textarea value changes
`className`	`string`	—	packages.commonProps.className.description

Accessibility

Accessibility features and considerations

Textareas include proper ARIA attributes when used with labels. Use the htmlFor attribute on labels to associate them with textareas. Provide clear placeholder text and error messages. Ensure sufficient color contrast for all states.

packages.title