Textarea

A textarea component built on react-textarea-autosize that can automatically adjust its height based on content. Control the minimum and maximum number of rows displayed.

Installation

import { Textarea } from '@geckoui/geckoui';

Basic Usage

<Textarea placeholder="Type something..." />

Props API

Examples

Auto-Resizing Textarea

<Textarea
  autoResize
  placeholder="This textarea grows as you type..."
/>

With Row Constraints

<Textarea
  rows={4}
  placeholder="Fixed at 4 rows"
/>

Auto-Resize with Max Rows

<Textarea
  autoResize
  rows={2}
  maxRows={8}
  placeholder="Grows from 2 to 8 rows, then scrolls..."
/>

Disabled State

<Textarea
  disabled
  placeholder="This textarea is disabled"
  value="Cannot edit this content"
/>

Read-Only State

<Textarea
  readOnly
  value="This is read-only content that cannot be edited."
  rows={3}
/>

Auto-Resize Behavior

When autoResize is enabled:

• The textarea grows automatically as content increases
• Minimum height is determined by the rows prop
• Maximum height is determined by the maxRows prop
• Shrinks back down when content is removed

When autoResize is disabled:

• The textarea has a fixed height
• Users can resize manually (unless CSS prevents it)
• The maxRows prop is ignored

Accessibility

• Fully keyboard navigable
• Works with screen readers
• Supports all ARIA textarea attributes
• Disabled state is properly communicated

Styling

The component uses the class name GeckoUITextarea. Override styles using the className prop:

.GeckoUITextarea {
  /* Your custom styles */
}

Dependencies

This component uses react-textarea-autosize for the auto-resize functionality.

Related Components

• Input - Single-line text input
• Label - Form labels
• InputError - Error messages
• RHFTextarea - React Hook Form integration